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

时间:2014-04-14 10:34:09

标签: javascript jquery

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

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

  <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>

1 个答案:

答案 0 :(得分:1)

<强> Demo

您可以使用以下内容。只需在data-maxdata-min按钮中设置updown属性中的最大值和最小值;

<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);
          }
    });
});