Question

这是我目前使用的代码：

<script>
   $(".lk").click(function(){
   $(this).find("#lke").html(function(i, val) { return val*1+1 });
   });

   $(".lk").click(function(){
   $(this).find("#lke").html(function(i, val) { return val*1-1 });
   });
</script>

当用户点击按钮时，＃lke的值增加1.当他再次点击时，该值减少1.我当前使用的代码不起作用，所以如何解决这个问题？

Answer 1

您的代码不起作用，因为您为每次点击分配了两个事件 - 一个增加了值，一个减少了它，因此没有任何反应。

您可以使用toAdd之类的外部变量来确定要执行的操作：

var toAdd = 1;
$(".lk").click(function(){
    newValue = oldValue + toAdd;
    toAdd *= -1;
    ...
});

Answer 2

您可以使用外部变量来决定是否必须递增o递减值

<script>
   var increment = true;
   $(".lk").click(function(){
      var lke = $(this).find("#lke"), 
          value = parseInt(lke.html()) || 0;

      lke.html( increment ? value + 1 : value - 1);
      increment = !increment;
   });
</script>

Answer 3

尝试这样的事情：

$(".lk").click(function() {
   if ($(this).hasClass('clicked')) {
       $(this).removeClass('clicked'));
       $(this).find("#lke").html(function(i, val) { return val*1-1 });
   } else {
       $(this).addClass('clicked');
       $(this).find("#lke").html(function(i, val) { return val*1+1 });  
   }
});

您也可以使用数据属性，而不是检查类。

或使用toggleClass()。

$(".lk").click(function() {
   if ($(this).hasClass('clicked')) {
       $(this).toggleClass('clicked'));
       $(this).find("#lke").html(function(i, val) { return val*1-1 });
   } else {
       $(this).toggleClass('clicked');
       $(this).find("#lke").html(function(i, val) { return val*1+1 });  
   }
});

Answer 4

你对同一个对象进行两次调用，试试这个

<script>
   var val = 0; // Put the original value
   var negative = false;
   $( document ).ready(function() { // You need to declare document ready
      $(".lk").click(function(){
         val = val + ((negative) ? -1 : 1); // Change if its positive or negative
         negative = (negative) ? false : true;
         $("#lke").text(val); // Adjust the html ?
      });
   });
</script>

如何从一个按钮增加和减少计数器 - 单击并再次单击jQuery

4 个答案: