主页 / 问题 / 1204324
Accepted
Alines
Asked:2021-11-14 03:11:51 +0000 UTC2021-11-14 03:11:51 +0000 UTC

如何将条件仅应用于 jQuery 中的一个子元素？

  • 772

有一个在线商店。购物车页面上有几个项目。每个产品都有一个输入，其中包含所选产品的数量和多个 + 和 - 开关。在产品页面上，当一个输入时一切正常。但是在这个页面上，由于有几个元素，所以在切换数量的时候，这个数量会在所有字段中同时变化。代码中需要更改哪些内容以使其仅适用于所选字段？

<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>
jquery

2 个回答

  1. Best Answer

    参考这个

       $(".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);
     
   });
    • 1

  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>

    • 1

相关问题