仅在当前 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($){

    

    $('.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) {

        

        $(this).parents('.add-links').find('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>

<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 3

.add-links在事件处理程序中，您可以使用 找到包含事件目标元素的特定元素$(this).closest(".add-links")。所以：

$('.add-links').on('change', '.qty', function(event) {
    $(this).closest(".add-links").find('a.ajax_add_to_cart').attr('data-quantity',  + $(this).val());
});