更改值输入重复许多时间与同一类（jQuery）

Question

我有两个“李”具有相同的类“product cg-product-wrap”每个包含输入“variation_id”。我希望当我点击“li”的< span class =“link”>时，改变它们输入的内容而不是所有使用jQuery的输入。

这里是HTML代码

<li class="product"> 
    <div class="cg-product-wrapper"> 
     <a href="#"><span class="link">objet1</span></a> 
     <form class="cart variation_color_shop" method="post" enctype="multipart/form-data"> 
      <input type="hidden" name="variation_id" class="variation_id" value="1"> 
      <button type="submit" class="single_add_to_cart_button btn_acheter"> 
       Acheter 
      </button> 
     </form> 
    </div> 
</li> 
<li class="product"> 
    <div class="cg-product-wrapper"> 
     <a href="#"><span class="link">objet2</span></a> 
     <form class="cart variation_color_shop" method="post" enctype="multipart/form-data"> 
      <input type="hidden" name="variation_id" class="variation_id" value="2"> 
      <button type="submit" class="single_add_to_cart_button btn_acheter"> 
       Acheter 
      </button> 
     </form> 
    </div> 
</li> 

，这里是jQuery代码

(function($) { 
    $(document).on('click', '.link', function(e) { 

     $('.variation_color_shop').find('input[name="variation_id"], input.variation_id').val('newval').change(); 
    }); 

})(jQuery); 

是否有任何解决方案？

Answer 1

使用$(this)遇到的背景下，找到喜欢

(function($) { 
    $(document).on('click', '.product', function(e) { 
     $(this).find('.variation_color_shop input[name="variation_id"], .variation_color_shop input.variation_id').val('newval').change(); 
    }); 

})(jQuery); 

右输入其中$(this)代表点击李

编辑

Follwing代码适用于您的结构变化在问题

(function($) { 
     $(document).on('click', 'span.link', function() { 
      $(this).parents('li.product:first').find('.variation_color_shop input[name="variation_id"], .variation_color_shop input.variation_id').val('newval').change(); 
     }); 

    })(jQuery); 

这次您通过$(this)获得点击跨度（带有“链接”类）。通过jQuerys parents-function你可以导航到祖先（在你的情况下，李），然后在里面找到你正在寻找的东西。

通常将父母功能与:first选择器相结合可以减少运行时间并确保不会获得您不知道的祖先。