Question

我有一个文本框增量递减值的脚本，它工作正常。我唯一需要做的就是，我必须设置它的最小值和最大值，以便接受递减和递增。

我不需要任何警告信息来向用户显示，我只需要它就不应该在达到限制后更改值。

  <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

<强> Demo

您可以使用以下内容。只需在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);
          }
    });
});

修改：对于图片按钮： Demo 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);
          }
    });
});

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

1 个答案: