javascript - 如何在java脚本中更改每个具有相同类名的特定按钮的多个文本框值？

Question

我想创建一个电子商务购物车，其中数量通过按钮增加或减少，因为购物车有多个项目，因此多个文本框和按钮具有相同的类名。出于测试目的，我创建了 5 个带有按钮的文本框，一个用于递增，另一个用于递减。当我单击任何按钮时，它们只会改变

var dec = document.getElementsByClassName("dec_button");
var inc = document.getElementsByClassName("inc_button");
var x = document.getElementsByClassName("num");

for (var i = 0; i <= 3; i++) {
  dec[i].addEventListener("click", Dec);
  inc[i].addEventListener("click", Inc);

  function Dec() {
    x[i].value -= 1;
  }

  function Inc() {
    x[i].value = +x[i].value + 1;
  }
}

<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>

Answer 1

不要在循环中按索引访问元素(这可能会导致关闭问题)，而是在每个点击事件中遍历 DOM 以查找应更改其值的相关 input。试试这个:

var dec = document.getElementsByClassName("dec_button");
var inc = document.getElementsByClassName("inc_button");
var x = document.getElementsByClassName("num");

for (var i = 0; i <= 1; i++) {
  dec[i].addEventListener("click", function() {
    this.nextElementSibling.value = parseInt(this.nextElementSibling.value, 10) - 1;
  });
  inc[i].addEventListener("click", function() {
    this.previousElementSibling.value = parseInt(this.previousElementSibling.value, 10) + 1;
  });
}

<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>

这是 jQuery 中的相同内容:

$('.dec_button').on('click', function() {
  $(this).next().val((i, v) => parseInt(v, 10) - 1)
});

$('.inc_button').on('click', function() {
  $(this).prev().val((i, v) => parseInt(v, 10) + 1)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>
<input type="button" class="dec_button" value="-">
<input type="text" value="0" class="num">
<input type="button" class="inc_button" value="+">
<br>
<hr>