更改值輸入重複許多時間與同一類（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選擇器相結合可以減少運行時間並確保不會獲得您不知道的祖先。