Question

功能性：

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

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

问题：

当我点击带有thumb_like / thumb_unlike类的元素时，它会按照说明进行操作，但是第二次点击不会更改类，用户可以添加/删除多于1个（增加thumb_count by 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>

的Javascript

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

这将一个函数绑定在更高的div as evan suggests，但是也允许更少的代码，更少的事件处理程序，并且（IMO）更容易维护，因为您只需要处理逻辑一次。您还可以使用单个服务器端路由来实现类似的＆amp;不像。

You can play with it in a jsfiddle here

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

2 个答案: