Question

我正在制作一个项目，它使用一个小图像将记录标记为表格中多行的收藏夹。数据从数据库中提取，图像基于该项目是否为收藏。一个喜欢的图像，一个不同的图像，如果不是喜欢的话。我希望用户能够切换图像并使其成为喜爱与否。这是我的代码：

$(function () {
    $('.FavoriteToggle').toggle(
      function () {
        $(this).find("img").attr({src:"../../images/icons/favorite.png"});
        var ListText = $(this).find('.FavoriteToggleIcon').attr("title");
        var ListID = ListText.match(/\d+/);
        $.ajax({
            url: "include/AJAX.inc.php",    
            type: "GET",
            data: "action=favorite&ItemType=0&ItemID=" + ListID,        
            success: function () {}     
        });
      },
      function () {
        $(this).find("img").attr({src:"../../images/icons/favorite_not.png"});
        var ListText = $(this).find('.FavoriteToggleIcon').attr("title");
        var ListID = ListText.match(/\d+/);
        $.ajax({
            url: "include/AJAX.inc.php",    
            type: "GET",
            data: "action=favorite&ItemType=0&ItemID=" + ListID,        
            success: function () {}     
        });
      }
     );
});

如果初始状态不是最喜欢的，那么效果很好。但是如果它最初是最喜欢的，你必须双击以使图像改变。这导致AJAX触发两次，并且在图像响应之前基本上使它成为最喜欢的，然后不是最喜欢的。用户认为他是最喜欢的，因为图像改变了，但实际上并非如此。帮助任何人？

Answer 1

向定义状态的favoriteToggle添加一个类。使用它来定义图标的CSS而不是交换图像。然后它会让你轻松找出favoriteToggle的状态。

$(function() {
$('.FavoriteToggle').click(function(){
    var $this = $(this);
    var id = $this.find('.FavoriteToggleIcon').attr("title").match(/\d+/);
    if ($this.hasClass('isFavorite')){
        $this.removeClass('isFavorite');
    } else {
        $this.addClass('isFavorite');
    }
    $.ajax({
        url: "include/AJAX.inc.php",    
        type: "GET",
        data: "action=favorite&ItemType=0&ItemID=" + id,        
        success: function () {}     
    });
})
});

添加到您的css：

.FavoriteToggle .icon{
    background: url("../../images/icons/favorite_not.png");
}
.FavoriteToggle.isFavorite .icon{
    background: url("../../images/icons/favorite.png");
}

通过这样做，您可以获得一个定义状态的类，这样您就可以做更多的事情，然后根据需要更改图像，这样就可以在javascript中定义总是很脏的图像路径。

Answer 2

不知道这是否适合你 - 但我通常使用它作为切换功能 - 并且使用一些额外的php我甚至可以将其调整为一个或另一个初始状态：

<style type="text/css">
<!--
.mybox_edit { 
display: none; 
} 
-->

</style>

<script language="JavaScript" type="text/JavaScript">
<!--

function toggleBox( box_id ) { 
var box_edit = document.getElementById(box_id + "_edit"); 
var box_show = document.getElementById(box_id + "_show"); 

// is it hidden? 
if ( box_show.style.display == 'none' ) { 
box_show.style.display = 'block'; 
box_edit.style.display = 'none'; 
} else { 
box_show.style.display = 'none'; 
box_edit.style.display = 'block'; 
} 
}
//-->
</script>

Answer 3

$(function () {
  // toggle on click
  $('.FavoriteToggle').click ( function() {
    // prevent duplicate AJAX request with a "loading" flag
    if (!this.isLoading) {
      var $img   = $(this).find("img");
      var ListID = $(this).find('.FavoriteToggleIcon').attr("title").match(/\d+/);

      // flag that we are currently loading something
      this.isLoading = true;       

      // determine the action from the current state of the img 
      if ($img.attr("src").indexOf("favorite.png") > -1)
        var actionVerb = "unFavorite";
      else
        var actionVerb = "mkFavorite";

      $.ajax({
        url: "include/AJAX.inc.php",    
        type: "GET",
        data: {action: actionVerb, ItemType: 0, ItemID: ListID },
        success: function($i) {
          return function() { 
            // change image on success only
            if ($i.attr("src").indexOf("favorite.png") > -1) {
              $i.attr("src", "../../images/icons/favorite_not.png";
            else
              $i.attr("src", "../../images/icons/favorite.png";
          };
        }($img),
        error: function(xhr, textStatus, errorThrown) { 
          // make some note of the error
          alert(textStatus);
        }
        complete: function(p) {
          return function(xhr, textStatus) { 
            // set loading flag to false when done
            p.isLoading = false; 
          };
        }(this)
      });
    }
  });
});

未经测试，但你应该明白这一点。

通过向if ($img.attr("src").indexOf("favorite.png")添加favorite CSS类，可以更轻松地完成整个<img>内容。例如，在主要功能中：

var actionVerb = $img.is(".favorite") ? "unFavorite" : "mkFavorite";

，并在success回调中：

if ($i.is(".favorite"))
  $i.attr("src", "../../images/icons/favorite_not.png";
else
  $i.attr("src", "../../images/icons/favorite.png";

// now toggle the CSS class
$i.toggleClass("favorite")

Answer 4

嗯，这就是我最终的结果，上面是PetersenDidit's post的简化版本。

$('.FavoriteToggle').click(function() {
    var id = $(this).attr("title").match(/\d+/);
    if ($(this).hasClass('isFavorite')) {
        $(this).removeClass('isFavorite');
    } else {
        $(this).addClass('isFavorite');
    }
    $.ajax({
        url: "include/AJAX.inc.php",
        type: "GET",
        data: "action=favorite&ItemType=0&ItemID=" + id,
        success: function() {
        }
    });
});

jQuery toggle（）具有未知的初始状态

4 个答案: