Question

我正在寻找在此函数上使用max选项的方法，但是不确定是否在输入上使用data属性，但是我认为jQuery中必须有一种更简单的方法吗？一页上可以有多个输入。

     <button type="button" id="sub" class="sub">-</button>
     <input name="updates[{{ variant.id }}]" id="quantity-{{ forloop.index0 }}" onfocus="this.select()" class="quantity field multiple_add" min="0" type="number" value="0" tabindex="1" max="{{ variant.inventory_quantity }}" />
     <button type="button" id="add" class="add">+</button>


 jQuery(function($) {
    $('.add').click(function () {
      $(this).prev().val(+$(this).prev().val() + 1);
    });
    $('.sub').click(function () {
        if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
    });
  });

Answer 1

使用数据属性将两种方法都使用一种方法。读取min和max属性，看看是否超出范围并进行设置，以使其不会超出范围。

$(".inc").on("click", function() {
  // reference the button clicked
  var elem = $(this)
  // get if we are increaing or decreasing the value
  var dir = +elem.data('dir')
  // reference the input attached to the button
  var tb = $(elem.data('input'))
  // get the step, min and max attributes
  var step = +tb.attr("step")
  var min = +tb.attr("min")
  var max = +tb.attr("max")
  // update the value
  var updatedValue = +tb.val() + (dir * step)
  // determine if we are outisde the range, if we are than fix it
  if (updatedValue > max) updatedValue = max
  else if (updatedValue < min) updatedValue = min
  // update the value
  tb.val(updatedValue);  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="inc" type="button" data-dir="-1" data-input="#x1">-</button>
<input type="number" min="0" max="5" step="1" value="3" id="x1"/>
<button class="inc" type="button"  data-dir="1" data-input="#x1">+</button>

<hr/>

<button class="inc" type="button" data-dir="-1" data-input="#x2">-</button>
<input type="number" min="1" max="4" step=".5" value="2" id="x2"/>
<button class="inc" type="button"  data-dir="1" data-input="#x2">+</button>

有您的评论，没有ID ...

$(".inc").on("click", function() {
  // reference the button clicked
  var elem = $(this)
  // get if we are increaing or decreasing the value
  var dir = +elem.data('dir')
  // reference the input attached to the button
  // -1 is before, 1 is after so use next() or prev()
  var tb = elem[dir===-1 ? 'next' : 'prev']()
  // get the step, min and max attributes
  var step = +tb.attr("step")
  var min = +tb.attr("min")
  var max = +tb.attr("max")
  // update the value
  var updatedValue = +tb.val() + (dir * step)
  // determine if we are outisde the range, if we are than fix it
  if (updatedValue > max) updatedValue = max
  else if (updatedValue < min) updatedValue = min
  // update the value
  tb.val(updatedValue);  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="inc" type="button" data-dir="-1">-</button>
<input type="number" min="0" max="5" step="1" value="3"/>
<button class="inc" type="button"  data-dir="1">+</button>

<hr/>

<button class="inc" type="button" data-dir="-1">-</button>
<input type="number" min="1" max="4" step=".5" value="2"/>
<button class="inc" type="button"  data-dir="1">+</button>

Answer 2

您可以使用number输入类型，并以此方式设置最小值和最大值：

<input type="number" min="1" max="10">

最大输出数选择器

2 个答案: