0
258
VistasContador de incrementos/decrementos para 3 botones?
Tengo tres botones como este en mi sitio:
Estoy tratando de incrementar y disminuir los contadores, pero solo funciona para dos, el primero funciona bien, pero el segundo agrega 2 a cada incremento y el tercero no funciona en absoluto.
Aquí está el código:
$('.plus').on('click', function(e) { var val = parseInt($(this).prev('input').val()); $(this).prev('input').val(val + 1); console.log(val); }); $('.minus').on('click', function(e) { var val = parseInt($(this).next('input').val()); if (val !== 0) { $(this).next('input').val(val - 1); } if (val == 0) { $(this).next('input').val(1); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label class="quantitiy" for="Quantity-collection-template-new"></label> <input class="minus minus1" type="button" value="-"> <input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input=""> <input class="plus plus1" type="button" value="+"> <label class="quantitiy" for="Quantity-collection-template-new"></label> <input class="minus minus2" type="button" value="-"> <input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input=""> <input class="plus plus2" type="button" value="+"> <label class="quantitiy" for="Quantity-collection-template-new"></label> <input class="minus minus3" type="button" value="-"> <input type="number" id="Quantity-collection-template-new" name="quantity" value="1" min="1" class="product-form__input qty" pattern="[0-9]*" data-quantity-input=""> <input class="plus plus3" type="button" value="+">1 Respuestas
Responde la pregunta0
Es más fácil responder esto aquí.
Está utilizando .plus1 y .plus2 pero no hay enlaces .plus3 en el sitio web. Lo cual es diferente de lo que publicaste aquí, por eso está funcionando, así que mi consejo es:
Simplemente elimine el duplicado y use la misma lógica aquí, inténtelo de nuevo y háganoslo saber.
$('.plus').on('click', function(e) { // omitted }); $('.minus').on('click', function(e) { // omitted });Esto es lo que tienes ahora mismo en la web:
$('.plus1').on('click', function(e) { var val = parseInt($(this).prev('input').val()); $(this).prev('input').val(val + 1); }); $('.minus1').on('click', function(e) { var val = parseInt($(this).next('input').val()); if (val !== 0) { $(this).next('input').val(val - 1); } if (val == 0) { $(this).next('input').val(1); } });Y otra sección;
$('.plus2').on('click', function(e) { var val = parseInt($(this).prev('input').val()); $(this).prev('input').val(val + 1); }); $('.minus2').on('click', function(e) { var val = parseInt($(this).next('input').val()); if (val !== 0) { $(this).next('input').val(val - 1); } if (val == 0) { $(this).next('input').val(1); } });Un par de sugerencias;
No use la misma identificación, cree alguna lógica para agregar al menos un índice para cada identificación si representan más o menos lo mismo. product-1 y product-2 y así sucesivamente. La misma identificación es la receta para el desastre y un no-no desde el principio.
Recuerde actualizar tanto la id como for propiedades con identificadores únicos.
minus/plus - index funciona.