Как в jQuery применить условие только к одному child элементу?

Question

Есть Интернет-магазин. На странице корзины несколько товаров. У каждого товара есть input с количеством выбранных товаров и рядом переключатели + и -. На странице товара, когда один input все работает хорошо. Но на этой странице, так как элементов несколько, при переключении количества, это количество меняется во всех полях одновременно. Что в коде нужно исправить, чтобы применялось только к выбранному полю?

<script type="text/javascript">
   $(".order__increment").click(function(e) {
     e.preventDefault();
     $(".order__holder input").attr('value', parseInt($(".order__holder input").val()) + 1);
   });

   $(".order__decrement").click(function(e) {
     e.preventDefault();
     var val = parseInt($(".order__holder input").val()) - 1;
     if(val < 1 )
      val = 1;
     $(".order__holder input").attr('value',val);
     
   });
  </script>

<div class="order__holder addtocart-group-field">
    <input type="text" name="quantity[{{ product.cart_id }}]" value="{{ product.quantity }}" size="1" class="cart-form" />
    <div class="atcg-is order__control">
        <span class="order__arrow order__increment">+</span>
        <span class="order__arrow order__decrement">-</span>
    </div>
    <button type="submit" data-toggle="tooltip" title="{{ button_update }}" class="refresh-cart-button">
    <i class="fa fa-refresh"></i>
</div>

Answer 1

обращайтесь к this

   $(".order__increment").click(function(e) {
     e.preventDefault();
     $(this).parents('.order__holder').find("input").attr('value', parseInt($(this).parents('.order__holder').find("input").val()) + 1);
   });

   $(".order__decrement").click(function(e) {
     e.preventDefault();
     var val = parseInt($(this).parents('.order__holder').find("input").val()) - 1;
     if(val < 1 )
      val = 1;
     $(this).parents('.order__holder').find("input").attr('value',val);
     
   });

Answer 2

Внутри обработчиков событий, this ссылается на объект текущего кликнутого элемента.

Нужный инпут можно взять так: $(this).closest(".order__holder").find(".cart-form"); а всё в целом можно сократить до:

$(".order__arrow").on("click", function(e) {
  e.preventDefault();
  var $input = $(this).closest(".order__holder").find(".cart-form");
  
  var curr = Number( $input.val() );  
  var diff = $(this).hasClass("order__increment") ? 1 : -1;
  // Есть такой класс ? меняем на +1 : иначе, на -1
  
  $input.val( Math.max(1, curr + diff) );
});

.order__arrow { display: inline-block; padding: 5px 20px; background: #ddd; user-select: none; cursor: pointer; margin: 5px 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="order__holder addtocart-group-field">
  <input type="text" name="0" value="0" size="1" class="cart-form" />
  <div class="atcg-is order__control">
    <span class="order__arrow order__increment">+</span>
    <span class="order__arrow order__decrement">-</span>
  </div>
</div>

<div class="order__holder addtocart-group-field">
  <input type="text" name="0" value="0" size="1" class="cart-form" />
  <div class="atcg-is order__control">
    <span class="order__arrow order__increment">+</span>
    <span class="order__arrow order__decrement">-</span>
  </div>
</div>

БЛОГ НА HUSL

Как в jQuery применить условие только к одному child элементу?

Ответы (2 шт):