Question

我有这样的代码：

<script>
(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--;
        (value<1) ? value=1 : '';
        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'));
</script>

但是当我点击一个减量或增量时，这将改变每个输入字段......但我需要分开并动态，这里是html：

<div class="quantity">
    <span class="input-number-decrement" style="margin-right: 15px;"><i class="fa fa-angle-left"></i></span><input type="text" step="4" min="" max="" name="" value="0"  class="input-number" size="4" />
<span class="input-number-increment" style="margin-left: 10px;"><i class="fa fa-angle-right"></i></span>
</div>

我可以有多个输入字段，并且所有需要单独工作......任何解决方案？

Answer 1

问题出在这里

rotateImage

.prev()和.next()将获取els.dec = el.prev(); els.inc = el.next();中匹配元素的所有前后元素。

完全删除此步骤并使用

el

代替。

function init(el) {
  el.prev().on('click', decrement);
  el.next().on('click', increment);
  // ...

(function() {
  window.inputNumber = function(el) {
    var min = el.attr('min') || false;
    var max = el.attr('max') || false;

    el.each(function() {
      init($(this));
    });

    function init(el) {
      el.prev().on('click', decrement);
      el.next().on('click', increment);

      function decrement() {
        var value = el[0].value;
        value--;
        (value < 1) ? value = 1: '';
        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 2

您应该像这样初始化您的代码：

$('.input-number').each(function(){
    inputNumber($(this));
})

而不是：

inputNumber($('.input-number'));

请参阅JS fiddle

使用javascript更改一个输入字段

2 个答案: