首頁猿問僅在當前 div...

僅在當前 div 內(nèi)更改鏈接中的屬性，而不是對所有其他鏈接更改屬性

JavaScript

慕慕森 2023-10-14 18:52:20

請告訴我如何僅在當前 div 內(nèi)更改“添加到購物車”鏈接中的數(shù)據(jù)數(shù)量屬性。當數(shù)量增加/減少時，頁面上所有“添加到購物車”鏈接的數(shù)據(jù)數(shù)量屬性中的數(shù)量會發(fā)生變化。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>

查看完整描述

2 回答

蠱毒傳說

TA貢獻1895條經(jīng)驗獲得超3個贊

您可以嘗試使用 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

? ? ? ? }? ? ? ? ? ? ? ? ? ? ??

? ? });

? ??

});

? ? <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="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="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>

反對回復(fù) 2023-10-14

慕神8447489

TA貢獻1780條經(jīng)驗獲得超1個贊

你可以在這里更改為$(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();

});

</div>

</div>

</div>

</div>

</div>

</div>

反對回復(fù) 2023-10-14

手掌心

TA貢獻1942條經(jīng)驗獲得超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());
});

反對回復(fù) 2023-10-14