初始状态未知的 jQuery toggle()

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 中定义图像路径。