滑動處於活動狀態時，JQuery addClass縮略圖

Question

我從頭開始構建滑塊功能。我有一張幻燈片列表，當前幻燈片有一類「活動幻燈片」。

<ul class="slides"> 
    <li class ="active-slide"></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

然後我有一個對應的縮略圖列表，當你點擊它們時，滑塊顯示相應的幻燈片。

<ul class="thumbnails"> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

所有這些都正常工作，滑塊更改幻燈片並添加「active-slide」類。 我想要做的是聽「活動幻燈片」的類，然後添加一個「活動拇指」類到相應的縮略圖，以便用戶知道哪個縮略圖當前激活。滑塊使用前一個，下一個，以及分頁，因此我總是傾聽「活動幻燈片」，因爲它每10秒鐘更換一次。

我使用Backbones.js並不能完全讓自己看起來如何檢查活動幻燈片索引，然後在類「主動拇指」的加入到活動縮略圖的相應/匹配指數。

謝謝！

Answer 1

創建一個自定義屬性。

<ul class="slides"> 
    <li data-index="1" class ="active-slide"></li> 
    <li data-index="2"></li> 
    <li data-index="3"></li> 
    <li data-index="4"></li> 
</ul> 

<ul class="thumbnails"> 
    <li data-index="1"></li> 
    <li data-index="2"></li> 
    <li data-index="3"></li> 
    <li data-index="4"></li> 
</ul> 

當您單擊下一個或上一個：

$(".thumbnails [data-index='" + $('.slides .active-slide').attr('data-index') + "']").addClass("active-thumb"); 

代碼沒有測試過，但我認爲你的想法。

編輯：

要清除活性。保存當前的索引。刪除所有激活的項目，然後再次使用先前保存的當前索引應用激活項目。

// assume we click next 
var currentIndex = $('.slides .active-slide').attr('data-index'); 
$(".thumbnails li").removeClass("active-thumb"); 
$(".thumbnails [data-index='" + (currentIndex + 1) + "']").addClass("active-thumb"); 

當然，你需要多一點來檢查，如果你在年底或幻燈片的begening，但我敢肯定，你就可以搞定。