如何在每个对应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'); 
});