将值更改为使用同一类重复多次输入（jQuery）

Question

我有两个具有相同类“产品 cg-product-wrap”的“li”，每个都包含一个输入“variation_id”。我想当我点击“li”的时改变他们输入的内容，而不是所有使用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)代表点击的li

编辑

以下代码适用于您问题中更改的结构

 (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 您可以导航到祖先（在您的情况下为 li），然后在其中找到您要搜索的内容。

通常将 parents-function 与 :first-selector 结合起来很有用，以减少运行时间并确保您不会得到您不知道的祖先。