递增/递减 jQuery 影响错误的输入

Question

我对JavaScript有点陌生。我尝试制作一些简单的代码来增加和减少购物车中的产品。这是小提琴：

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);
  });
});

这是一个工作小提琴：

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

另一种选择是使用HTML5输入类型"数字"，其功能非常相似

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

Answer 2

将您的变量更改为此变量，它将起作用

var $n = $(this).parent().find('.number');

您必须告诉它才能找到您在其中单击的项目。工作小提琴https://jsfiddle.net/spadez/q9umfz8a/1/

Answer 3

将.prevAll与:first一起使用可查找当前元素的previous-input-child。

正如 Johnny Kutnowski 在评论中提到的，.prevAll() 将获得匹配元素集中每个元素的所有先前兄弟姐妹。使用:first筛选所选元素。

使用classes而不是重复的id属性。

$(document).ready(function() {
  $(".increment").click(function() {
    event.preventDefault();
    $(this).prevAll('input:first').val(function() {
      return Number(this.value) + 1;
    });
  });
  $(".decrement").click(function() {
    event.preventDefault();
    $(this).prevAll('input:first').val(function() {
      return Number(this.value) + -1;
    });
  });
});

.active {
  font-weight: underline;
}
label {
  display: block;
  font-weight: bold;
  padding: 20px 0 8px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>
      <input value="0">
      <button class="decrement">-</button>
      <button class="increment">+</button>
      <label>Lemon</label>
      <input value="0">
      <button class="decrement">-</button>
      <button class="increment">+</button>
    </form>
  </nav>
</main>

小提琴演示