Question

好的，这是交易。我正在尝试建立一个网站，当您点击它时图像会发生变化。我提出了以下工作代码：

$(".follow").on("click", function(){
    $(".follow").attr("src", "../pictures/vriendverwijder.png");
$(".follow").addClass("unfollow");
$(".follow").removeClass("follow")

}); //onclick

在上面的部分我改变了我的课程以取消关注。现在，当班级取消关注并点击它时，我希望图片返回上一张图片。所以我使用了这段代码：

$(".unfollow").on("click", function(){
    $(".unfollow").attr("src", "../pictures/vriendtoevoeg.png");
$(".unfollow").addClass("follow");
$(".unfollow").removeClass("unfollow")

}); //onclick

然而，图片不会改变。我知道这个变化的图片有很多主题，但我不明白。谁能告诉我我做错了什么？

Answer 1

问题是因为当页面加载时元素具有follow类，因此unfollow的事件处理程序不受约束。

您可以使用一个公共类来附加事件，使用一个标志类来确定状态，如下所示：

<img class="foo follow" src="../pictures/vriendverwijder.png" />

$(".foo").on("click", function() {
    var src = $(this).hasClass('follow') ? "../pictures/vriendverwijder.png" : "../pictures/vriendtoevoeg.png";
    $(this).attr("src", src);
    $(this).toggleClass("unfollow follow")
});

Answer 2

问题是您在绑定事件时将事件处理程序绑定到具有特定类的元素。

使用委托事件处理程序，因为类正在动态更改：

e.g。

$(document).on('click', ".follow", function(){
   $(".follow").attr("src", "../pictures/vriendverwijder.png");
   $(".follow").addClass("unfollow");
   $(".follow").removeClass("follow")
});

$(document).on('click', ".unfollow", function(){
    $(".unfollow").attr("src", "../pictures/vriendtoevoeg.png");
    $(".unfollow").addClass("follow");
    $(".unfollow").removeClass("unfollow")
});

如果将它们应用到另一个不变的类（如Rory已添加），可以将它们合并为一个处理程序

Answer 3

您的问题是您希望点击侦听器绑定到任何添加的样式。这不是标准行为。正如TrueBlueAussie所提到的，您也可以使用.on来收听新创建的项目，但最终我认为您的方法可以简化......

将您的听众更改为：

$(".follow").on("click", function(){
    $(this).toggleClass('unfollow');
});

当unfollowed与follow：

配对时，让你的CSS覆盖标准样式

.follow{
    background-image{
        url(/path-to-image.png);
    }
}

.follow.unfollow{
    background-image{
        url(/path-to-alternate-image.png);
    }
}

PS - 我暗示将图像更改为由css处理的背景图像，因为它们看起来是静态的。您甚至可以将它们组合成一个精灵表，然后偏移背景位置以最小化http加载请求。

比方说，例如，你的follow元素是一个锚标记，通常不是块级元素......

<a href="#" class="follow"></a>

你的css可能是：

.follow{
    display:block;
    width:45px;
    height:20px;
    background: url(/pictures/vriendverwijder.png) no-repeat;
    background-position:0 0;
}

.follow.unfollow{
    background-position:0 -20px;
}

并且您的图像可能是一个像这样准备的单个...（对不起ascii艺术）

------------------------
|    normal state       |
------------------------  40px high
|    active state       |
------------------------
         45 px wide

课堂改变后onclick

3 个答案: