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

how to set the limit of minimum and maximum value in Jquery or js

本文关键字：最小值 最大值 设置 Jquery js      更新时间：2023-09-26

我有一个文本框的递增-递减值脚本，它运行得很好。我唯一需要实现的是，我必须为它设置一个最小值和最大值，以接受递减和递增。

我不需要任何警告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>

演示

您可以使用以下内容。只需在data-max中设置最大值和最小值，在up和down按钮中设置data-min属性；

<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

第2版：如果您不止一次动态创建这些按钮呢？

假设您有动态生成按钮，并生成如下输出；

<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);
          }
    });
});
相关文章：