javascript - 防止 JS 点击计数器出现负数

Question

我有一个简单的 JS 计数器，带有两个用于统计人数的按钮（+ 和 -）。工作正常，但它允许用户在减少计数时进入负数。可能是一个简单的解决方案，但不适合我。任何帮助，将不胜感激。谢谢。

JS

    //Pax Counter

$(document).ready(function(){
    //Count Function
    $('#increase').click(function() {
    $('#pax_count').val(function(i, val) { return val*1+1 });
});
    $('#decrease').click(function() {
    $('#pax_count').val(function(i, val) { return val*1-1 });
}); 

  });

HTML

<input name="pax_count" type="text" class="pax_input_box" id="pax_count" value="0" >

<div id="pax_counter_container"><!-- open #pax_counter_container -->
<button id="increase" type="button" class="click_button" onTouchStart="EvalSound('audio3')"></button>
<button id="decrease" type="button" class="click_button" onTouchStart="EvalSound('audio3')"></button>
</div><!-- close #pax_counter_container -->

Answer 1

您可以使用Math.max()：

$("#pax_count").val(function(i, val) {
    return Math.max(0, val - 1);
});

Answer 2

我只是修改了你的函数，在减去之前检查该值是否大于或等于 0。

$(document).ready(function(){
    //Count Function
    $('#increase').click(function() {
    $('#pax_count').val(function(i, val) { return val*1+1 });
});
    $('#decrease').click(function() {
    $('#pax_count').val(function(i, val) { 
         if(val*1>0){
             return val*1-1;
         }else{
             return val;
         }
}); 

});

Answer 3

只需检查 val 是否更小 1

$('#decrease').click(function() {
    $('#pax_count').val(function(i, val) { return val>=1?val*1-1:0 });
});