如何为每个对应的div在两个类之间切换？

Question

我有多个传送带使用光滑滑雪板插件在一页。我已经成功地为每个旋转木马设置了自定义导航，但是当单击两个类时，我希望每个导航链接在两个类之间切换。

我已经成功地在这两者之间创建了一个切换，但是它将这个切换应用于所有的旋转木马，而不仅仅是一个已经被点击的导航。

更新：我需要类只在旋转木马改变幻灯片时切换。

我差不多到了我需要的地方，只是有点困住了，如果能帮我完成这件事，我会很感激的。

这是演示- 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>

联署材料：

$('.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中有一组事件会告诉您幻灯片已经(或将要)发生变化，例如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/

更新:注意，由于.active-slide / .inactive-slide类切换，这只适用于2张幻灯片。因此，在当前代码的幻灯片更改中，所有以前不活动的选项卡都将切换到active。如果只想要一个active选项卡来获取.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 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'); 
});

Answer 3

问题在于您要在所有.tabs元素上切换类。相反，您需要遍历DOM来调用toggleClass()，只调用那些包含在与导致click事件的a相同的a中的DOM。为此，您可以使用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