jQuery-onclick事件在第二次单击后不会更改类

Question

功能：

当我单击类别为thumb_like或thumb_unlike元素时，我将使用POST添加/删除图像。 具有thumb_count类的thumb_count将根据用户的操作增加/减少。 如果他喜欢将1加到当前计数等...

thumb_unlike是用户不喜欢图片的默认状态

问题：

当我单击具有thumb_like / thumb_unlike类的元素时， thumb_like thumb_unlike进行操作，但是第二次单击不会更改类，并且用户可以添加/删除不止1个对象（ 将thumb_count增加1 ）

HTML标记：

<div class="image_box">
    <div class="image">...</div>
    <div class="image_info">
        <div class="thumb_like" data-id="1"></div>
        <div class="thumb_count">10</div> likes | 0 comments
    </div>
</div>

<div class="image_box">
    <div class="image">...</div>
    <div class="image_info">
        <div class="thumb_unlike" data-id="2"></div>
        <div class="thumb_count">55</div> likes | 0 comments
    </div>
</div>

Java脚本

$(document).ready(function() {

    $(".thumb_unlike").click(function () {
        var image_id = $(this).attr('data-id');
        var count = $(this).next(".thumb_count").text();
        $(this).next(".thumb_count").html(parseInt(count) + 1)
        $.post('..url..' + image_id);

        $(this).removeClass();
        $(this).addClass('thumb_like');
    });

    $(".thumb_like").click(function () {
        var image_id = $(this).attr('data-id');
        var count = $(this).next(".thumb_count").text();
        $(this).next(".thumb_count").html(parseInt(count) - 1)
        $.post('..url..' + image_id);

        $(this).removeClass();
        $(this).addClass('thumb_unlike');
    });
});

Answer 1

调用函数时，侦听器将附加到元素。 听众会以自己的方式拥有自己的拇指。 我认为解决此问题的最简单方法是将侦听器附加到父元素并委托给大拇指。 像这样：

$('.parent_div').on('click', '.thumb_like', function() {
  //thumb_like code here
});

$('.parent_div').on('click', '.thumb_unlike', function() {
  //thumb_like code here
});

Answer 2

如果您打算有切换的能力-我建议您使用一种功能。 您甚至不需要像这样调整HTML就可以做到这一点：

$(function() {
    $('body').on('click', '.thumb_like, .thumb_unlike', function() {
        var image_id = $(this).attr('data-id'),
            isLike = $(this).hasClass('thumb_like');
        $(this).toggleClass('thumb_like thumb_unlike')
               .next('.thumb_count')
               .text(function(_, i) { return +i + (isLike ? 1 : -1); });
        $.post('..url..', { 
            id: image_id,
            action: isLike ? 'like' : 'unlike'
        });
    });
});

正如evan所建议的那样 ，这将一个函数绑定到了更高的div上，但是还允许更少的代码，更少的事件处理程序，并且（IMO）易于维护，因为您只需处理一次逻辑。 您还可以将单个服务器端路由用于“喜欢”和“不同”。

您可以在jsfiddle中使用它 。