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

jQuery - onclick event does not change class after second click

本文关键字：事件 单击 jQuery-onclick 第二次      更新时间：2024-02-20

功能：

当我点击类为thumb_like或thumb_unlike的元素时，我会像POST一样添加/删除图像。类别为thumb_count的元素将根据用户的操作而增加/减少。如果他喜欢在当前计数上加1等…

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

问题：

当我点击类为thumb_like/thumb_unlike的元素时，它会按照指示进行操作，但第二次点击不会更改类，用户可以添加/删除不止一个类似（将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>

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

当函数被调用时，监听器会附加到元素上。按照你的方式，听众自己也会竖起大拇指。我认为解决这一问题最简单的方法是将侦听器附加到父元素并将其委托给拇指。像这样：

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

如果您想要切换功能，我建议您使用一个函数。你可以做到这一点，甚至不需要像这样调整你的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）更容易维护，因为只处理一次逻辑。您还可以为like&不像

你可以在这里用小提琴演奏。

相关文章：