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

我有多个旋转木马使用滑头插件在一个页面上。我已经为每个旋转木马设置了自定义导航，但我希望每个导航链接在单击时在两个类之间切换

我已经设法在两者之间创建了一个切换，但是它将切换应用于所有转盘，而不仅仅是带有已单击导航的转盘

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

我几乎到了我需要的地方，但有点卡住了，如果能帮我完成这件事，我将不胜感激

这是演示-

HTML:

---

问题是因为您在所有

.tabs

元素上切换类。相反，您需要遍历DOM，以便仅对那些包含在与导致

单击事件的
a
相同的
选项卡中的选项卡调用
toggleClass（）
。为此，您可以使用
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');
});

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

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

问题是因为您在所有
.tabs
元素上切换类。相反，您需要遍历DOM，以便仅对那些包含在与导致
单击事件的
a
相同的
选项卡中的选项卡调用
toggleClass（）
。为此，您可以使用
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');
});

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

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

更改为此

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

换成这个

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

您真正想要做的是更改选项卡活动类，而不是单击，而是更改幻灯片。单击事件时，您应该只在
.tab
中保留幻灯片更改触发器（
slickGoTo
）。Slick Carousel中有一组事件会告诉您幻灯片已经（或将要）更改，例如更改之前的
。这就是您应该用来切换活动的内容

您的代码应该如下所示：

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

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

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


更新：
请注意，由于
。活动幻灯片
/
。非活动幻灯片
类的切换，这只适用于2张幻灯片。因此，在当前代码中的幻灯片更改中，所有以前不活动的选项卡都将切换为活动。如果您只需要一个活动选项卡来获取
.active slide
类，您可以执行以下操作：

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

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

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

您真正想做的是更改选项卡活动类，而不是单击，而是更改幻灯片。单击事件时，您应该只在
.tab
中保留幻灯片更改触发器（
slickGoTo
）。Slick Carousel中有一组事件会告诉您幻灯片已经（或将要）更改，例如更改之前的
。这就是您应该用来切换活动的内容

您的代码应该如下所示：

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

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

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


更新：
请注意，由于
。活动幻灯片
/
。非活动幻灯片
类的切换，这只适用于2张幻灯片。因此，在当前代码中的幻灯片更改中，所有以前不活动的选项卡都将切换为活动。如果您只需要一个活动选项卡来获取
.active slide
类，您可以执行以下操作：

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

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

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

同时添加html标记；s因为您使用的是类，所以使用$（this）和toggleClass可以得到您想要的：）您需要使用$（this）.parents（'.tab'）.toggleClass感谢这些建议，但是，似乎没有一个有效。有什么想法吗？也可以添加html标记；s因为您使用的是类，所以使用$（this）和toggleClass可以得到您想要的：）您需要使用$（this）.parents（'.tab'）.toggleClass感谢这些建议，但是，似乎没有一个有效。有什么想法吗？谢谢你的回答。这就是我所需要的，但是如果用户单击
.tab
两次，是否有办法阻止切换发生？换言之，切换仅与幻灯片更改相关。希望这是有意义的？我建议开始一个新的问题，在问题中标记你的特定滑块库谢谢你的回答。这就是我所需要的，但是如果用户单击
.tab
两次，是否有办法阻止切换发生？换言之，切换仅与幻灯片更改相关。希望这是有意义的？我建议开始一个新的问题，在问题中标记您的特定滑块库，您需要从一个家长更改为另一个家长it@TejasVaishnav是的，我和父母一起更新了，也会有用的谢谢你的回答，这就是我需要的，但是如果用户点击.tab两次，有没有办法阻止切换发生？换言之，切换仅与幻灯片更改相关。这有意义吗？仅供参考。
closest（）
在逻辑上会更好，因为它在到达第一个匹配项时就会停止
parents（）
继续从DOM向上到
正文
。您需要从父级更改为父级it@TejasVaishnav是的，我与家长一起更新了，它也会起作用。谢谢你的回答。这也是我需要的。但是，如果用户单击.tab两次，有没有办法阻止切换发生？换言之，切换仅与幻灯片更改相关。这有意义吗？仅供参考。
closest（）
在逻辑上会更好，因为它在到达第一个匹配项时就会停止
parents（）
继续沿着DOM到
正文
。太好了，谢谢你向我解释。太好了，谢谢你向我解释。