使用.stepUp()和JQuery返回错误".stepUp不是函数“

Question

我有以下代码：

参见这里的代码示例：https://codepen.io/Rubenkretek/pen/VwYQVgO?editors=1111

预期结果:当单击“+”按钮时，输入字段将增加1。

实际结果:未更改输入和以下错误：

TypeError: selectedInput.stepUp不是一个函数

​

$(function() {

  $('<span class="add" uk-icon="plus">+</span>').insertAfter('.product-container .product-quantity input');
  $('<span class="sub" uk-icon="minus">-</span>').insertBefore('.product-container .product-quantity input');


  $('.add').click(function() {

    var selectedInput = $(this).prev('input');

    if (selectedInput.val() < 10) {
      console.log("value is less than 10");
      $('.add').click(function() {
        selectedInput.stepUp(1);
      });
    }

  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-container">
  <div class="product-info">
    <h2>Product name</h2>
  </div>
  <div class="product-quantity">
    <input type="number"></input>
  </div>
</div>

​

Answer 1

您是嵌套事件处理程序。只有一个和委托

此外，stepUp是一个DOM方法，因此您需要从jQuery中获取DOM元素(添加到元素中)

注意: type=number有自己的旋转器控件。

更新:我意识到看到这个问题，在div中可能会有多个qty字段。

​

$(function() {
  $('<span class="add" uk-icon="plus">+</span>').insertAfter('.product-container .product-quantity input');
  $('<span class="sub" uk-icon="minus">-</span>').insertBefore('.product-container .product-quantity input');

  $('.product-quantity').on("click", '.add, .sub', function() {
    let dir = $(this).is(".add");
    // use bracket notation to get .prev() or .next() 
    // and then [0] to get the DOM element because stepUp is a DOM method
    const selectedInput = $(this)[dir ? "prev" : "next"]()[0]; 
    let val = +selectedInput.value || 0;
    const min = +selectedInput.min;
    const max = +selectedInput.max;
    if ((dir && val < 10) ||
      (!dir && val > 0)) {
      selectedInput.stepUp(dir ? 1 : -1);
    } else console.log("Value needs to be between", min, " and ", max)
  });
});

[type=number] {
  width: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-container">
  <div class="product-info">
    <h2>Product name</h2>
  </div>
  <div class="product-quantity">
    <input type="number" min="0" max="10" value="0" /><br />
    <input type="number" min="0" max="5" value="0" /><br />
  </div>
</div>

​