切換單個元素單擊的增量和減量計數

Question

我有一個具有整數計數的元素。

<span class="likes-count"> 2 </span>

當點擊一個div必須切換值的遞增和遞減。 <div class="liked"></div>

問題： 我已經呼籲$('.liked').clicked一個功能，增加值和類變爲.notliked 而另一家的onclick函數遞減的價值，但它不能正常工作。 請查看我的代碼。我想這不是做這件事的最好方法。

這是我的演示代碼。

$(document).ready(function() { 
 
    $(".notliked").click(function() { 
 
     var $this = $(this); 
 
     $this.removeClass('notliked'); 
 
     $this.addClass('liked') 
 
     $count = $('.likes-count'); 
 
     $count.html((parseInt($count.html(),10) || 0) + 1); 
 

 
    }); 
 

 
    $(".liked").click(function() { 
 
     var $this = $(this); 
 
     $this.removeClass('liked'); 
 
     $this.addClass('notliked'); 
 
     $count = $('.likes-count'); 
 
     $count.html((parseInt($count.html(),10) || 0) - 1); 
 

 
    });   
 
});

.heart { 
 
    color: #fff; 
 
    height:50px; 
 
    cursor:pointer; 
 
    width:50px; 
 
    background-color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 

 
<span class="likes-count"> 2 </span> 
 

 
<div class="liked heart">Click</div>

Answer 1

您需要委託點擊事件。在開始$（「。notliked」）返回0個元素，因此它永遠不會執行。

爲了增大/減小，您可以使用文本值：

.text(function)像：

$count.text(function(idx, txt) { 
    // convert text to number and increment by one 
    return +txt + 1; 
}); 

的片段：

$(document).on('click', ".notliked", function() { 
 
    var $this = $(this); 
 
    $this.removeClass('notliked'); 
 
    $this.addClass('liked') 
 
    $count = $('.likes-count'); 
 
    $count.text(function(idx, txt) { 
 
     return +txt + 1; 
 
    }); 
 

 
}); 
 

 
$(document).on('click', ".liked", function() { 
 
    var $this = $(this); 
 
    $this.removeClass('liked'); 
 
    $this.addClass('notliked'); 
 
    $count = $('.likes-count'); 
 
    $count.text(function(idx, txt) { 
 
     return (+txt == 0) ? 0 : (+txt - 1); 
 
    }); 
 

 
});

.heart { 
 
color: #fff; 
 
height:50px; 
 
cursor:pointer; 
 
width:50px; 
 
background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<span class="likes-count"> 0 </span> 
 

 
<div class="liked heart">Click</div>