如何在每個對應div的兩個類之間切換？

Question

我有一個頁面上使用Slick Slider插件的多個輪播。我設法爲每個輪播設置了自定義導航，但我希望每個導航鏈接在單擊時在兩個類之間切換。

我已經設法在兩者之間創建切換，但是它將切換應用於所有輪播，而不僅僅是具有已點擊導航的切換。

更新： 我需要的類時，轉盤改變滑到僅切換。

我幾乎是我需要的地方，但有點卡住，並希望得到任何幫助完成此。

這裏的演示 - http://jsfiddle.net/81t4pkfa/158/

HTML：

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/> 
<div class="test"> 
    <div class="option"> 
     <p>Test 1</p> 
    </div> 
    <div class="option"> 
     <p>Test 1 -</p> 
    </div> 
    <ul class="tabs"> 
     <li class="tab slide-0 active-slide"> 
     <a href="#">1. Slide 0</a> 
     </li> 
     <li class="tab slide-1 inactive-slide"> 
     <a href="#">1. Slide 1</a> 
     </li> 
    </ul> 
</div> 
<div class="test"> 
    <div class="option"> 
     <p>Test 2</p> 
    </div> 
    <div class="option"> 
     <p>Test 2 -</p> 
    </div> 
    <ul class="tabs"> 
     <li class="tab slide-0 active-slide"> 
     <a href="#">2. Slide 0</a> 
     </li> 
     <li class="tab slide-1 inactive-slide"> 
     <a href="#">2. Slide 1</a> 
     </li> 
    </ul> 
</div> 
<div class="test"> 
    <div class="prev_next"></div> 
    <div class="option"> 
     <p>Test 3</p> 
    </div> 
    <div class="option"> 
     <p>Test 3 -</p> 
    </div> 
    <ul class="tabs"> 
     <li class="tab slide-0 active-slide"> 
     <a href="#">3. Slide 0</a> 
     </li> 
     <li class="tab slide-1 inactive-slide"> 
     <a href="#">3. Slide 1</a> 
     </li> 
    </ul> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script> 

JS：

$('.test').each(function (idx, item) { 
    var carouselId = "carousel" + idx; 
    this.id = carouselId; 
    $(this).slick({ 
     slide: "#" + carouselId +" .option", 
     adaptiveHeight: true, 
     autoplay: false, 
     arrows: false, 
     dots: true 
    }); 
}); 

$(".tabs li a").click(function(){ 
    var slideIndex = $(this).parent().index(); 
    $(this).closest('.test').slick('slickGoTo', parseInt(slideIndex)); 
    $('.tab').toggleClass('inactive-slide active-slide'); 
}); 

Answer 1

你真正想要做的是什麼更改制表符活動類不點擊，但在幻燈片更改。點擊事件時，您應該只保留幻燈片更改觸發器（slickGoTo）在您的.tab中。 Slick Carousel中有一系列活動會告訴您幻燈片已經（或將要）改變，例如， beforeChange。這就是你應該用來切換活動。

你的代碼看起來應該再是這樣的：

$('.test').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
    if (currentSlide !== nextSlide) { 
     $(this).find('.tab').toggleClass('inactive-slide active-slide'); 
    } 
}); 

$(".tabs li a").click(function(){ 
    var slideIndex = $(this).parent().index(); 
    $(this).closest('.test').slick('slickGoTo', parseInt(slideIndex)); 
}); 

http://jsfiddle.net/norin89/81t4pkfa/161/

UPDATE： 注意，這會工作僅針對因.active-slide/.inactive-slide類撥動2張幻燈片。因此，在當前代碼的幻燈片更改中，所有先前不活動的選項卡將切換爲活動狀態。如果你只需要一個激活的標籤讓.active-slide類，你會做這樣的事情：

$('.test').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
     $(this).find('.tab').removeClass('active-slide').addClass('inactive-slide') 
      .eq(nextSlide).toggleClass('active-slide inactive-slide'); 
}); 

http://jsfiddle.net/norin89/81t4pkfa/164/

Answer 2

的問題是，因爲你所有.tabs元素撥動類。相反，您需要遍歷DOM才能調用toggleClass()，這些對象包含在與a相同的.tabs中，這導致了click事件。要做到這一點，您可以使用closest()和find()，像這樣：

$(".tabs li a").click(function(){ 
    var slideIndex = $(this).parent().index(); 
    $(this).closest('.test').slick('slickGoTo', parseInt(slideIndex)); 
    $(this).closest('.tabs').find('.tab').toggleClass('inactive-slide active-slide'); 
}); 

Updated fiddle

Answer 3

更改這個

$(".tabs li a").click(function(){ 
     var slideIndex = $(this).parent().index(); 
     $(this).closest('.test').slick('slickGoTo', parseInt(slideIndex)); 
    $(this).parents('.tabs').find('.tab').toggleClass('inactive-slide active-slide'); 
    }); 

編輯：

$(".tabs li a").click(function(){ 
    var slideIndex = $(this).parent().index(); 
    $(this).closest('.test').slick('slickGoTo', parseInt(slideIndex)); 
$(this).parents('.tabs').find('.tab').removeClass('active-slide'); 
    $(this).parents('.tabs').find('.tab').addClass('inactive-slide'); 
    $(this).parent().addClass('active-slide'); 
$(this).parent().removeClass('inactive-slide'); 
});