我有以下片段：$(".tab").on("click", function() { var tabID = $(this).attr("data-item"); $('.image[data-item = ' + tabID + ']').addClass('active');});<div class="tabbedContent"> <div class="imageWrapper"> <div class="image" data-item="item--1"> <!-- image --> </div> <div class="image" data-item="item--2"> <!-- image --> </div> </div> <div class="tabs__rapper"> <div class="tab" data-item="item--1" > <!-- tab text here --> </div> <div class="tab" data-item="item--2" > <!-- tab text here --> </div> </div> </div>基本上，當(dāng)用戶單擊選項(xiàng)卡時(shí)，它會(huì)顯示分配給該部分的圖像（它們通過 鏈接data-item）。但是，具有以下條件：$('.image[data-item = ' + tabID + ']').addClass('active');如果我在一頁上有兩個(gè)這樣的選項(xiàng)卡式模塊（如果我在同一頁上有兩個(gè)，則它們data-items將相同，因?yàn)樗鼈兌紡?1 開始），那么兩個(gè)部分中的圖像都會(huì)發(fā)生變化。我想做的是使用 更改范圍內(nèi)的選項(xiàng)卡this。但是，我不確定如何做到這一點(diǎn)，我已經(jīng)嘗試過（需要這樣的東西）：$(this + '[data-item = '+tabID+']').addClass('active');我離得還遠(yuǎn)嗎？
3 回答
慕姐8265434
TA貢獻(xiàn)1813條經(jīng)驗(yàn) 獲得超2個(gè)贊
由于.tab范圍位于 內(nèi)部.tabbedContent：
$(this).parent('.tabs__rapper').parent('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');
慕森卡
TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊
假設(shè).imageis inside .tab，您可以使用以下方法更改范圍內(nèi)的選項(xiàng)卡：
$(".tab").on("click", function() {
var tabID = $(this).attr("data-item");
$(this).closest('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');
});
白衣染霜花
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
聲明事件時(shí)嘗試停止事件傳播：
$(".tab").on("click", function( event ) {
event.stopPropagation();
var tabID = $(this).attr("data-item");
$('.image[data-item = ' + tabID + ']').addClass('active');
});
- 3 回答
- 0 關(guān)注
- 159 瀏覽
添加回答
舉報(bào)
0/150
提交
取消