0

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

我的提要或流有一个“喜欢”按钮（类：.like）。当用户单击它（使用 $(".like") ）时，它会以不刷新的方式将 like 插入数据库（使用 jQuery）。

插入后，我将文本更改为“Unlike”，将类更改为“.unlike”。

但是，当用户重新单击它时，它只是再次执行相同的函数，而不是转到 $(".unline").click 函数。我是否必须“更新”脚本或其他内容？

例如：

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

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

4

8 回答 8

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");
});
于 2012-10-11T23:44:51.723 回答
1

那是因为“不像”属性。脚本加载时尚未添加到 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');
    }
});
于 2012-10-11T23:47:52.370 回答
1

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

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

http://jsfiddle.net/NScyM/

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

于 2012-10-12T00:01:56.713 回答
0

试试这个

$(".like").click(function(){
   alert("Like!");
   $(this).removeClass("like");
   $(this).attr("class", "unlike");
});
$(".unlike").click(function(){
   alert("Unlike!");
   $(this).removeClass("unlike");
   $(this).attr("class", "like");
});
于 2012-10-11T23:45:10.313 回答
0

我认为您将不得不使用live()或on()来完成这项工作：

 $(".like").live("click", function() {
    $(this).removeClass("like").addClass("unlike");
 });
 $(".unlike").live("click", function() {
    $(this).removeClass("unlike").addClass("like");
 });
于 2012-10-11T23:45:11.183 回答
0

为了让我的代码在这样的事情上保持干净，我分配了一个永远不会改变的类，并将点击事件与它联系起来。样式类只是作为 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');
});
于 2012-10-11T23:46:48.427 回答
0

试试这个

$(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");
});

演示。

于 2012-10-11T23:49:11.057 回答
-1

单击事件unlike处理程序尚未与新项目关联。如果您要像那样动态更改类，则需要查看（jQueryon处理程序）[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');
});
于 2012-10-11T23:45:04.360 回答