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

debugcn 发表于 Dev

g 米哈尔·哈达克（Michal Hudak）

功能性：

当我点击元素与类thumb_like或thumb_unlike然后我会添加/删除像图像与POST。具有类的元素thumb_count将根据用户的动作增加/减少。如果他喜欢将1加到当前计数等...

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

问题：

当我单击具有class 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');
    });
});

传福音

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。