仅在当前 div 内更改链接中的属性，而不是对所有其他链接更改属性

Question

请告诉我如何仅在当前 div 内更改“添加到购物车”链接中的数据数量属性。当数量增加/减少时，页面上所有“添加到购物车”链接的数据数量属性中的数量会发生变化。

jQuery(function($){

    

    $('.plus').on('click', function(e) {

        var val = parseInt($(this).prev('input').val());

        $(this).prev('input').val(val + 1).change();

    });

    

    $('.minus').on('click', function(e) {

        var val = parseInt($(this).next('input').val());

        if (val !== 0) {

            $(this).next('input').val(val - 1).change();

        }

    });

    

    $('.add-links').on('change', '.qty', function(event) {

        $('a.ajax_add_to_cart').attr('data-quantity',  + $(this).val());

    });

    

    $('.qty').change();

    

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="add-links clearfix">

    <div class="quantity buttons_added">

        <button type="button" value="-" class="minus">-</button>

        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">

        <button type="button" value="+" class="plus">+</button>

    </div>

    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>

</div>

<div class="add-links clearfix">

    <div class="quantity buttons_added">

        <button type="button" value="-" class="minus">-</button>

        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">

        <button type="button" value="+" class="plus">+</button>

    </div>

    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>

</div>

Answer 1

您可以尝试使用 jQuery.closest()并按.find()以下方式定位特定元素：var link = $(this).closest('.add-links').find('.ajax_add_to_cart');然后分别增加/减少加/减的值。演示：jQuery(function($){        $('.plus').on('click', function(e) {        var val = parseInt($(this).prev('input').val());        $(this).prev('input').val(val + 1).change();                        console.clear();//test, clear the console        var link = $(this).closest('.add-links').find('.ajax_add_to_cart');        var v =  (+link.attr('data-quantity')) + 1;        link.attr('data-quantity', v);        console.log('Current data-quantity: ' + link.attr('data-quantity'));//test    });        $('.minus').on('click', function(e) {        var val = parseInt($(this).next('input').val());        if (val !== 0) {            $(this).next('input').val(val - 1).change();                        console.clear(); //test, clear the console            var link = $(this).closest('.add-links').find('.ajax_add_to_cart');            var v =  link.attr('data-quantity') - 1;            link.attr('data-quantity', v);            console.log('Current data-quantity: ' +  link.attr('data-quantity')); //test        }                          });    });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="add-links clearfix">    <div class="quantity buttons_added">        <button type="button" value="-" class="minus">-</button>        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">        <button type="button" value="+" class="plus">+</button>    </div>    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></div><div class="add-links clearfix">    <div class="quantity buttons_added">        <button type="button" value="-" class="minus">-</button>        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">        <button type="button" value="+" class="plus">+</button>    </div>    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></div><div class="add-links clearfix">    <div class="quantity buttons_added">        <button type="button" value="-" class="minus">-</button>        <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">        <button type="button" value="+" class="plus">+</button>    </div>    <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></div>

Answer 2

你可以在这里更改为$(this).parents('.add-links').find('a.ajax_add_to_cart')..jQuery(function($){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('.plus').on('click', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; var val = parseInt($(this).prev('input').val());&nbsp; &nbsp; &nbsp; &nbsp; $(this).prev('input').val(val + 1).change();&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('.minus').on('click', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; var val = parseInt($(this).next('input').val());&nbsp; &nbsp; &nbsp; &nbsp; if (val !== 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).next('input').val(val - 1).change();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('.add-links').on('change', '.qty', function(event) {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $(this).parents('.add-links').find('a.ajax_add_to_cart').attr('data-quantity',&nbsp; + $(this).val());&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('.qty').change();&nbsp; &nbsp;&nbsp;});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="add-links clearfix">&nbsp; &nbsp; <div class="quantity buttons_added">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" value="-" class="minus">-</button>&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" value="+" class="plus">+</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></div><div class="add-links clearfix">&nbsp; &nbsp; <div class="quantity buttons_added">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" value="-" class="minus">-</button>&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" value="+" class="plus">+</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></div><div class="add-links clearfix">&nbsp; &nbsp; <div class="quantity buttons_added">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" value="-" class="minus">-</button>&nbsp; &nbsp; &nbsp; &nbsp; <input type="number" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" size="4" inputmode="numeric">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" value="+" class="plus">+</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <a href="#" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a></div>

Answer 3

.add-links在事件处理程序中，您可以使用 找到包含事件目标元素的特定元素$(this).closest(".add-links")。所以：$('.add-links').on('change',&nbsp;'.qty',&nbsp;function(event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$(this).closest(".add-links").find('a.ajax_add_to_cart').attr('data-quantity',&nbsp;&nbsp;+&nbsp;$(this).val()); });