Question

所以我将用一个例子来解释这个。

我的Feed或流有一个“喜欢”按钮（类：.like）。当用户点击它时（使用$（“。like”）），它可以将无法刷新的方式插入到数据库中（使用jQuery）。

当它被插入时，我将文本更改为“不同”，将类更改为“.unlike”。

但是，当用户重新点击它时，它只会再次执行相同的功能，而不是转到$（“。unline”）。单击功能。我是否必须“更新”脚本或其他内容？

例如：

    $(".like").click(function(){
       alert("Like!");
       $(this).attr("class", "unlike");
    });
    $(".unlike").click(function(){
       alert("Unlike!");
       $(this).attr("class", "like");
    });

问题是它不会出现不同的函数，即使属性发生了变化，也只会重复like函数。

Answer 1

分配运行上述代码时会发生事件绑定。您必须每次重新绑定事件，或者更好的是，使用事件委派：

$(document)on("click",".like",function(){
   alert("Like!");
   $(this).addClass("unlike");
   $(this).removeClass("like");
});
$(document)on("click",".unlike",function(){
   alert("Unike!");
   $(this).addClass("like");
   $(this).removeClass("unlike");
});

Answer 2

那是因为“不像”attr。当脚本加载时，没有添加到dom中。试试这个：

<body>
<div class="like_it_or_not">
   HELLO!
</div>
</body>

和JS

$("body").on('click','.like_it_or_not', function(){
    $(this).toggleClass('like', 'unlike');
    if ($(this).hasClass('like')) {
       alert('like');
    } else if ($(this).hasClass('unlike')) {
       alert('unlike');
    }
});

Answer 3

如果您不想委派您的点击事件（过度设计IMO），请检查处理程序：

$(".like").click(function(){
   alert( $(this).hasClass('unlike') ? 'unlike' : 'like' );
   $(this).toggleClass("unlike like");
});

http://jsfiddle.net/NScyM/

每次单击并按预期切换类时，都应检查“不同”类。

Answer 4

试试这个

$(".like").click(function(){
   alert("Like!");
   $(this).removeClass("like");
   $(this).attr("class", "unlike");
});
$(".unlike").click(function(){
   alert("Unlike!");
   $(this).removeClass("unlike");
   $(this).attr("class", "like");
});

Answer 5

我认为你必须使用live()或on()来完成这项工作：

 $(".like").live("click", function() {
    $(this).removeClass("like").addClass("unlike");
 });
 $(".unlike").live("click", function() {
    $(this).removeClass("unlike").addClass("like");
 });

Answer 6

为了让我的代码在这样的东西上保持清洁，我分配了一个永不改变的类，并将click事件与之绑定。样式类只是作为CSS更改。例如：

<button class="vote like">button text</button>

$('.vote').click(function () {
    var alertText = ($(this).hasClass('like')) ? 'Like!' : 'Unlike!';
    alert(alertText);
    $(this).toggleClass('like').toggleClass('unlike');
});

Answer 7

试试这个

$(document).on('click', '.like', function(){
   alert("Like!");
   $(this).html('Unlike').removeClass("like").addClass("unlike");
});

$(document).on('click', '.unlike', function(){
   alert("Unlike!");
   $(this).html('Like').removeClass("unlike").addClass("like");
});

DEMO

Answer 8

unlike点击事件处理程序尚未与新项目关联。如果您要动态更改类，那么您将要查看（jQuery on处理程序）[http://api.jquery.com/on/]

$(document).on('click',".like", function(){
   alert("Like!");
   $(this).addClass("unlike").removeClass('like');

});
$(document).on('click',".unlike",function(){
   alert("Unlike!");
   $(this).addClass("like").removeClass('unlike');
});

我有一个jQuery onclick问题

8 个答案: