Question

我使用Jquery克隆一些表单输入。我想要实现的是，添加按钮内的计数器会触发这两个按钮之一的事件。如果计数为0（零），我想禁用添加按钮并为其分配一个类（非活动）。如果计数为9，我想禁用del-button并为其分配一个类（not-acitve）。

我的代码如下所示：

<button id="add" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button>
<button id="del" class="active" type="button">Upcount</button>

Jquery是这样的：

$(document).ready(function() {

    var upcount = 0;
    var downcount = 0; 
    var start = 9;

    $("#add").click(function() {
    upcount++;
    $("#counter").html(start - upcount + downcount);
    });

  $("#del").click(function() {
    downcount++;
    $("#counter").html(start - upcount + downcount);
    });

});

我也为它做了一个小提琴：https://jsfiddle.net/phii/8zf31158/

有人可以用if语句甚至更优雅的方式帮助我实现目标吗？

提前致谢！

Answer 1

更改您的方法，只使用一个counter。

之后，您可以创建一个检查counter的{{1}}和disable button的值的函数。

$(document).ready(function() {
   var counter = 9;
    
  $("#add").click(function() {
    counter++;
    $("#counter").html(counter);
    checkcounter();
  });

  $("#del").click(function() {
    counter--;
    $("#counter").html(counter);
    checkcounter();
  });
  
  function checkcounter()
  {
    if(counter >= 10)
      $("#add").prop("disabled",true);
    else if(counter<=0)
    {
      $("#del").prop("disabled",true);
    }
    else
    {
      $("#add").prop("disabled",false);
      $("#del").prop("disabled",false);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button>
<button id="del" class="active" type="button">Upcount</button>

Answer 2

我认为你可以像this那样更优雅地实现目标。

＆＃13;

var upcount = 9;
function updateCount() {
    $("#counter").html(upcount);
}
$(document).ready(function() {
    $("#add").click(function() {
        (upcount < 9) && upcount++;
        updateCount();
    });
    $("#del").click(function() {
        (upcount > 0) && upcount--;
        updateCount();
    });
});

＆＃13;

<button id="del" class="active" type="button">Downcount&nbsp;&#040;<span id="counter">9</span>&#041;</button>
<button id="add" class="active" type="button">Upcount</button>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

＆＃13;

限制按钮内的clickcount - Jquery

2 个答案: