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

Question

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

 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> <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).closest(".add-links")找到包含事件目标元素的特定.add-links元素。 所以：

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

Answer 3

您可以在此处更改为$(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>