Блог

У меня на сайте есть три такие кнопки:

Я пытаюсь увеличивать и уменьшать счетчики, но это работает только для двух, первый работает нормально, но второй добавляет 2 к каждому приращению, а третий вообще не работает.

Вот код:

 $('.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);  } }); 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;label class="quantitiy" for="Quantity-collection-template-new"gt;lt;/labelgt; lt;input class="minus minus1" type="button" value="-"gt; lt;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=""gt; lt;input class="plus plus1" type="button" value=" "gt;   lt;label class="quantitiy" for="Quantity-collection-template-new"gt;lt;/labelgt; lt;input class="minus minus2" type="button" value="-"gt; lt;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=""gt; lt;input class="plus plus2" type="button" value=" "gt;  lt;label class="quantitiy" for="Quantity-collection-template-new"gt;lt;/labelgt; lt;input class="minus minus3" type="button" value="-"gt; lt;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=""gt; lt;input class="plus plus3" type="button" value=" "gt; 

Здесь легче ответить на этот вопрос.

Вы используете .plus1 и .plus2 , но .plus3 на веб — сайте нет привязок. Что отличается от того, что вы опубликовали здесь, вот почему это работает, так что мой совет:

Просто удалите дубликат и используйте ту же логику здесь, попробуйте еще раз и дайте нам знать.

 $('.plus').on('click', function(e) { // omitted });  $('.minus').on('click', function(e) { // omitted });  

Это то, что у вас есть прямо сейчас на сайте:

 $('.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);  } });  

И еще один раздел;

 $('.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);  } });  

Пара предложений;

Не используйте один и тот же идентификатор, создайте некоторую логику, чтобы добавить по крайней мере индекс для каждого идентификатора, если они представляют более или менее одно и то же. product-1 product-2 и так далее. Тот же идентификатор-это рецепт катастрофы, и с самого начала нет-нет.

Не забудьте обновить оба id for свойства и с уникальными идентификаторами.

minus/plus - index работает.