javascript - 如何为每个相应的 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

改成这个

 $(".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'); 
});