Question

我正在尝试通过减号和加号来完成增量和减量。

我实现了增量，但是有条件，如果它达到20，它将停止。所以要做到这一点，我用off（'click'）来停止点击功能。然而，当我点击减号并再次单击加号时，它会停止不再增加。也许是因为删除了处理程序。

我试过unbind（）但是它的相同甚至设置返回false;或者preventDefault（）;

https://jsfiddle.net/ryuchix/nakgac59/18/

var skill = 0;

$(function() { // on page load
  $('.plus').on('click', function(){
    skill++;
   var input = $('.inputplus').val(skill);
   $('figcaption').html($('.inputplus').val() +'/20');
   if($('.inputplus').val() == 20) {
   $(this).unbind('click');
   }
  });
  $('.minus').on('click', function(){
    skill--;
    $('figcaption').text(skill +'/20');
  });
}); 


<div id="container">
<figure class="skill1">
        <img src="http://placehold.it/100?text=IMG" alt="">
          <span class="glyphicon glyphicon-minus-sign minus"></span>
          <span class="glyphicon glyphicon-plus-sign plus"></span>
          <figcaption>0/20</figcaption>
          <input type="hidden" class="inputplus" min="0" max="20">

      </figure>
</div>

Answer 1

不是取消绑定点击处理程序，而是在增加技能之前进行检查。您可能还希望在达到20时禁用加号，并在低于20时重新启用加号。

即。

$('.plus').on('click', function(){
 if (skill < 20) {
  skill++;
 }
 if (skill >= 20) {
   $('.plus').prop('disabled', true);
 }
 var input = $('.inputplus').val(skill);
 $('figcaption').html($('.inputplus').val() +'/20');
});
$('.minus').on('click', function () {
 //your code...
 //re-enable plus after any minus click, since it will always be 
 //bringing skill to lower than 20
 $('.plus').prop('disabled', false);
})

触发off（）或unbind（）后继续递增

1 个答案: