Tengo el siguiente problema:
Me gustaría cambiar el valor de un campo de entrada, que está al lado de otro elemento, en el que se hará clic.
HTML:
<div> <a id="{$sArticle.articleID}" class="minus"><i class="icon-minus-wide"></i></a> <input class="quantityNum--input quantity{$sArticle.articleID}" name="sQuantity" type="text" value="{$sArticle.minpurchase}"> <a id="{$sArticle.articleID}" class="plus"><i class="icon-plus-wide"></i></a> </div>JS:
$(document).on('click', ".plus", function (event) { let currentTarget = event.currentTarget; let idOfClickedElement = $(currentTarget).attr('id'); let currentQuantity = Number($('.quantity' + idOfClickedElement).val()); $(this).parent().find(".quantity" + idOfClickedElement).val(currentQuantity + 1) });Hay otros campos de entrada que son los mismos que en el ejemplo. Esos valores también cambian, pero solo quiero uno.
Como cada entrada con +/- está dentro de un contenedor div, puede usar
$(this).closest("div").find(".quantityNum--input")para obtener la entrada relacionada.
No hay necesidad de ID numéricos cuando se usa el recorrido DOM relativo.
La combinación de + y - en un solo evento da:
$(document).on('click', ".minus,.plus", function() { var delta = $(this).is(".plus") ? 1 : -1; $(this).closest("div").find(".quantityNum--input").val((i, val) => { console.log(val); return (val * 1) + delta; }); }); .minus, .plus { cursor: pointer } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <a class="minus">[-]<i class="icon-minus-wide"></i></a> <input class="quantityNum--input" name="sQuantity" type="text" value="100"> <a class="plus">[+]<i class="icon-plus-wide"></i></a> </div> <div> <a class="minus">[-]<i class="icon-minus-wide"></i></a> <input class="quantityNum--input" name="sQuantity" type="text" value="500"> <a class="plus">[+]<i class="icon-plus-wide"></i></a> </div>Creo que estás buscando .next y .prev .
nota: me gusta compartir información usando atributos de datos, así que lo he usado. puede usar cualquier otra id/class para diferenciar. eso depende de usted
Acabo de crear un script de demostración para usted
$('.number-action-button').on('click', function(){ const direction = $(this).data('direction'); if(direction === 'decrement'){ const $input = $(this).next('input[type="number"]'); $input.val($input.val() - 1); } if(direction === 'increment'){ const $input = $(this).prev('input[type="number"]'); $input.val(parseInt($input.val()) + 1); } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="number-action-button" data-direction="decrement">-</button> <input type="number" value="0" /> <button class="number-action-button" data-direction="increment" >+</button>solución simple: agrupe los 3 elementos en 1 contenedor, para que su selector principal pueda capturar fácilmente la entrada, de la forma en que ya lo hace.
<div> <a id="{$sArticle.articleID}" class="minus"><i class="icon-minus-wide"></i></a> <input class="quantityNum--input quantity{$sArticle.articleID}" name="sQuantity" type="text" value="{$sArticle.minpurchase}"> <a id="{$sArticle.articleID}" class="plus"><i class="icon-plus-wide"></i></a> </div> si no puede (o no quiere) cambiar el html, use $(this).next() (o $(this).prev() para el botón más) para encontrar la entrada.
por cierto: tal vez pruebes esa función (no la he probado, pero al menos debería darte una idea de cómo hacerlo)
$(document).on('click', ".plus,.minus", function (event) { let input_quantity=false; if($(this).hasClass('plus'){ input_quantity=$(this).prev(); input_quantity.val(parseInt(input_quantity.val())+1); }else{ input_quantity=$(this).next(); input_quantity.val(parseInt(input_quantity.val())-1); } });