如何在Jquery或js中設置最小值和最大值的限制

Question

我有這個腳本來增加文本框的遞減值，它工作正常。 我唯一需要實現的是，我必須為它設置一個最小值和最大值，以便接受地遞減和遞增。

我不需要任何警報 n 消息來向用戶顯示，我只需要它在達到限制后不應更改該值。

  <script>
    $(document).ready(function(){
  $("#up").on('click',function(){
    $("#incdec input").val(parseInt($("#incdec input").val())+1);
   });

   $("#down").on('click',function(){
    $("#incdec input").val(parseInt($("#incdec input").val())-1);
   });

 });
 </script>

Answer 1

演示

您可以使用以下內容。 只需設置max和在最小值data-max和data-min在屬性up和down按鈕;

<input type="button" id="up" value="Up" data-max="5"/>
<input type="button" id="down" value="Down" data-min="0"/>

在 js 中；

$(document).ready(function() {
    $("#up").on('click',function(){
          if ($("#incdec").val() < $(this).data("max")) {
            $("#incdec").val(parseInt($("#incdec").val())+1);
          }
    });

    $("#down").on('click',function(){
          if ($("#incdec").val() > $(this).data("min")) {
            $("#incdec").val(parseInt($("#incdec").val())-1);
          }
    });
});

編輯：對於圖像按鈕：演示 2

Edit2：如果你不止一次動態地創建按鈕怎么樣？

假設您動態生成按鈕並生成如下輸出；

<div>
    <input type="text" class="incdec" value="0"/>
    <input type="button" class="up" value="Up" data-max="5"/>
    <input type="button" class="down" value="Down" data-min="0"/>
</div>

<div>
    <input type="text" class="incdec" value="0"/>
    <input type="button" class="up" value="Up" data-max="5"/>
    <input type="button" class="down" value="Down" data-min="0"/>
</div>

....

您可以使用以下js：

$(document).ready(function() {
    $(".up").on('click',function(){
          var $incdec = $(this).parent().find(".incdec");
          if ($incdec.val() < $(this).data("max")) {
            $incdec.val(parseInt($incdec.val())+1);
          }
    });

    $(".down").on('click',function(){
          var $incdec = $(this).parent().find(".incdec");
          if ($incdec.val() > $(this).data("min")) {
            $incdec.val(parseInt($incdec.val())-1);
          }
    });
});