javascript - 递增/递减 jQuery 影响错误输入

Question

我对 JavaScript 有点陌生。我尝试编写一些简单的代码来增加和减少购物车中的产品。这是 fiddle :

https://jsfiddle.net/spadez/q9umfz8a/1/

HTML

<header>
  <nav>
    <ul>
      <li>A</li>
      <li class="active">B</li>
    </ul>
  </nav>
</header>
<main>
  <nav>
    <form>
      <h2>
Per Day
      </h2>
      <input type="radio" name="qty" value="5">5
      <input type="radio" name="qty" value="6">6
      <h2>
Days
</h2>
      <input type="radio" name="days" value="1">1
      <input type="radio" name="days" value="3">3
      <input type="radio" name="days" value="5">5
      <h2>
      Items
      </h2>
      <label>Apple</label>
      <img src="">
      <input value="0" class="number">
      <button class="decrement">-</button>
      <button class="increment">+</button>
      <label>Lemon</label>
      <img src="">
      <input value="0" class="number">
      <button class="decrement">-</button>
      <button class="increment">+</button>
    </form>
  </nav>
</main>

JS

$(document).ready(function() {
  $(".increment").click(function() {
    event.preventDefault();
    var $n = $(".number");
    $n.val(Number($n.val()) + 1);
  });
  $(".decrement").click(function() {
    event.preventDefault();
    var $n = $(".number");
    $n.val(Number($n.val()) - 1);
  });
});

如何让它影响按钮旁边的输入框？此外，我知道这可能是一个糟糕的方法 - 我怎样才能做得更好？

Answer 1

首先，您的函数中有 event.preventDefault(); 但您从未真正设置事件(因此默认操作实际上并未被阻止)，但这甚至不是必需的；您可以简单地将按钮设置为“按钮”类型，如下所示:

<button type="button" class="decrement">-</button>
<button type="button" class="increment">+</button>

如果您希望阻止默认操作，您只需像这样设置事件:

$(".increment").click(function(event) { 
    //function code 
});

其次，选择器 $('.number') 选择器不明确，导致按下递增或递减按钮时两个输入都会受到影响，解决方案如下:

var $n = $(this).prevAll(".number:first");

这将导致仅选择前一个 $('.number')。

这是所有的 Javascript

$(document).ready(function() {

  $(".increment").click(function() {
    var $n = $(this).prevAll(".number:first");
    $n.val(Number($n.val()) + 1);
  });

  $(".decrement").click(function() {
    var $n = $(this).prevAll(".number:first");
    $n.val(Number($n.val()) - 1);
  });

});

这是一个工作 fiddle :

https://jsfiddle.net/q9umfz8a/2/

另一种选择是使用 HTML5 输入类型“number”，其功能非常相似

<input type="number" value="0" class="number">