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>

我有两个这个元素的实例，但是当前增加其中一个元素的数量时，它也会控制另一个元素。我的问题是，我如何将这两个元素分开，以便它们独立于控制器。

这是我的JavaScript：

＆＃13;

(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'));

＆＃13;

提前谢谢！

Answer 1

尝试替换

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

通过

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

你的bug来自els.dec和els.inc包含的事实两个柜台的前身和后继者

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

1 个答案: