输入数字中箭头的Javascript实现-如何进行更改以使每一项都相关？

Question

我有一篮子商品，里面可以有许多不同的实体。我正在尝试使用不带箭头的input - number和额外的按钮+/-来实现商品数量的变化。我知道我可以使用identifiers并轻松地制定我的计划。但在我的例子中，我需要使用querySelectorAll。请帮我改正这段代码。quantity-arrow-minus会减少字段值，而quantity-arrow-plus会增加。如何才能使更改与每一项都相关？

​

var minus = document.querySelectorAll('.quantity-arrow-minus');
var update_cart = document.querySelectorAll('.update_cart');
var plus = document.querySelectorAll('.quantity-arrow-plus');

minus.forEach(function(node) {
node.addEventListener('click', function() {
    update_cart.forEach(function(element) {
        element.value = parseInt(element.value) - 1;
    });
});
});

plus.forEach(function(node) {
node.addEventListener('click', function() {
    update_cart.forEach(function(element) {
        element.value = parseInt(element.value) + 1;
    });
});
});

<form method="GET">
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button type="button" class="quantity-arrow-plus">+</button>
</form>

<form method="GET">
<button type="button" class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button type="button" class="quantity-arrow-plus">+</button>
</form>

​

Answer 1

您可以使用previousElementSibling and nextElementSibling访问与所单击的按钮相对应的输入：

​

var minus = document.querySelectorAll('.quantity-arrow-minus');
var update_cart = document.querySelectorAll('.update_cart');
var plus = document.querySelectorAll('.quantity-arrow-plus');

minus.forEach(function(node) {
    node.addEventListener('click', function(e) {
       const input = e.target.nextElementSibling
       input.value = parseInt(input.value) - 1;
    });
});

plus.forEach(function(node) {
    node.addEventListener('click', function(e) {
       const input = e.target.previousElementSibling
       input.value = parseInt(input.value) + 1;
    });
});

<form action="{% url 'cart:cart_update' %}" method="GET">
    <button type="button" class="quantity-arrow-minus">-</button>
    <input type="number" class="update_cart" value="0">
    <button type="button" class="quantity-arrow-plus">+</button>
    <br>
    <button type="button" class="quantity-arrow-minus">-</button>
    <input type="number" class="update_cart" value="0">
    <button type="button" class="quantity-arrow-plus">+</button>
</form>

​

Answer 2

请改用Number()。假设减号按钮就在您的输入之后，只需使用this.nextElementSibling即可。这将使您的代码更好，而不是对每个元素执行forEach。如果有很多这样的元素呢？

​

var minus = document.querySelectorAll('.quantity-arrow-minus');
var plus = document.querySelectorAll('.quantity-arrow-plus');

minus.forEach((node) => {
   node.onclick = function () {
       this.nextElementSibling.value = Number(this.nextElementSibling.value) - 1;
   }
});

plus.forEach((node) => {
    node.onclick = function () {
       this.previousElementSibling.value =Number(this.previousElementSibling.value) + 1;
   }
});

<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>
<br>
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>
<br>
<button class="quantity-arrow-minus">-</button>
<input type="number" class="update_cart" value="1">
<button class="quantity-arrow-plus">+</button>

​