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