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中使用它 。