切换单个元素单击时的递增和递减计数

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

sn-p：

$(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>