javascript - 使用 JavaScript 定位两个单独的元素

Question

我有一个由 + 和 - 的两个范围组成的微调器元素，以及中间的一个文本输入元素，用于显示从增加和减少中选择的数量:

<div class="quantity-spinner"> 
 <span class="input-number-decrement">–</span><input class="input-number" type="text" value="1" min="0" max="10"><span class="input-number-increment">+</
</div>

我有这个元素的两个实例，但目前当增加其中一个元素的数量时，它也会控制另一个元素。我的问题是，如何分离这两个元素，使它们独立成为 Controller 。

这是我的 JavaScript:

(function() {
  window.inputNumber = function(el) {
    var min = el.attr('min') || false;
    var max = el.attr('max') || false;
    var els = {};
    els.dec = el.prev();
    els.inc = el.next();
    el.each(function() {
      init($(this));
    });
    function init(el) {
      els.dec.on('click', decrement);
      els.inc.on('click', increment);
      function decrement() {
        var value = el[0].value;
        value--;
        if(!min || value >= min) {
          el[0].value = value;
        }
      }
      function increment() {
        var value = el[0].value;
        value++;
        if(!max || value <= max) {
          el[0].value = value++;
        }
      }
    }
  };
})();
inputNumber($('.input-number'));

提前谢谢您!

Answer 1

尝试更换

els.dec.on('click', decrement);
els.inc.on('click', increment);

由

el.prev().on('click', decrement);
el.next().on('click', increment);

你的错误来自于 els.dec 和 els.inc 包含两个计数器的前身和后继者