No está dando error. La cantidad se cambia solo en el primer producto, incluso si cuando presiono la flecha del segundo producto, se cambia la cantidad del primer producto. carro.js
var changeQ = document.getElementsByClassName('increase') for (i = 0; i < changeQ.length; i++) { changeQ[i].addEventListener('click', function(){ var productId = this.dataset.product var action = this.dataset.action console.log('productId:', productId, 'Action:', action) if (action == 'plus'){ Increase(productId, action) } else if(action=='minus'){ Decrease(productId, action) } }) } function Increase(productId,action){ console.log('Increase') var quantity = Number(document.getElementById("quantity").value); quantity = quantity+1; document.getElementById("quantity").value = quantity; console.log(quantity); } function Decrease(productId,action){ var quantity = Number(document.getElementById("quantity").value); console.log('Decrease') quantity = quantity-1; document.getElementById("quantity").value=quantity; }modelo
<div class="counter"> <div class="arrow-up increase" id="arrow-up" data-product="{{item.product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div> <div class="quantity"><input type="number" id="quantity" value="1"></div> <div class="arrow-down increase" id="arrow-down" data-product="{{item.product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div> </div>Está en Django. Entonces, ¿qué puedo hacer para indicar el producto específico? ¿Puede alguien ayudarme a resolver este problema, por favor!
Dado que ha utilizado document.getElementById() en las funciones de Increase y Decrease , devuelve el primer elemento con id='quantity' , por lo que solo puede establecer la cantidad para el primer producto.
Por lo tanto, debe usar algún valor para distinguir entre las etiquetas de input con id='quantity' . Sugeriría agregar data-product="{{ item.product.id }}" a la etiqueta de input , ya que ya está pasando la identificación del producto como productId a ambas funciones.
Por lo tanto, su plantilla sería algo como esto
<div class="counter"> <div class="arrow-up increase" id="arrow-up" data-product="{{item.product.id}}" data-action="plus" ><i class="fa fa-arrow-up"></i></div> <div class="quantity"><input type="number" id="quantity" value="1" data-product="{{item.product.id}}"></div> <div class="arrow-down increase" id="arrow-down" data-product="{{item.product.id}}" data-action="minus"><i class="fa fa-arrow-down"></i></div> </div> Y las funciones de Increase y Decrease se modificarían así
function Increase(productId,action){ console.log('Increase') var quantity = Number(document.querySelector(`input[data-product=${productId}]`).value); quantity = quantity+1; document.querySelector(`input[data-product=${productId}]`).value = quantity; console.log(quantity); } function Decrease(productId,action){ var quantity = Number(document.querySelector(`input[data-product=${productId}]`).value); console.log('Decrease') quantity = quantity-1; document.querySelector(`input[data-product=${productId}]`).value=quantity; }document.querySelector() nos permite usar selectores CSS para seleccionar elementos. Aquí lo usamos para seleccionar etiquetas de input con el atributo data-product igual al valor en productId .${} es para la interpolación de cadenas, podemos usarlo para insertar el productId del producto en la cadena del selector.