单击元素时切换增加和减少计数

Question

我有一个元素，其中包含一个整数计数。 2 当单击一个 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>

- Saurabh

---

你可能想使用.toggleClass()来代替这个 - http://api.jquery.com/toggleclass/ - Christopher Messer

我试过了，对于我的问题没有用。 - Saurabh

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>

- gaetanoM

---

太棒了。它正在运行。还有一个问题。如果初始计数为0，我不想将其递减为-1。你能告诉我如何实现吗 :) - Saurabh