Question

我有两个“li”，它们具有相同的类“product cg-product-wrap”，每个都包含一个输入“variation_id”。我想点击＆lt; span class =“link”＆gt; “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

修改

Follwing code适用于您问题中已更改的结构

(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），然后在其中找到您要搜索的内容。

通常将parent-function与:first - 选择器结合使用可以减少运行时间并确保不会获得您不知道的祖先。

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

1 个答案: