将类添加到元素，仅当添加另一个类时答案

【问题标题】：Add class to an element, only when another class is added将类添加到元素，仅当添加另一个类时
【发布时间】：2016-07-29 13:24:18
【问题描述】：

我知道这个问题可能有类似的重复项，但我找不到解决方案。我有一个带有 3 张幻灯片的滑块。该插件是lightslider。我想要实现的是每次第三个滑块为当前时向一个元素触发一个 css 动画。我注意到 active 的类被添加到当前幻灯片中，此幻灯片是当前可见的，如下面的屏幕截图所示。

所以我最初的想法是这样的。抓取特定元素即svg-slide，检查该元素是否有active的类，如果有，添加触发动画的css类。

我的代码：

if ( $('.svg-slide').hasClass('active') ) {
   $('.svg-slide').addClass('fire-animation');
}

这个问题是，如果我错了，请纠正我，当页面加载时，active 的类在第一张幻灯片上，所以代码已经检查了 svg-slide 没有拥有active 类，之后它什么也不做。任何帮助将不胜感激。

【问题讨论】：

我保存编辑的那一刻，你写了评论。不管怎么说，多谢拉。 ;)。顺便说一句，我的代码没有语法错误。

标签： javascript jquery css

【解决方案1】：

为什么不将getCurrentSlideCount 方法与onAfterSlide 事件一起使用？在更换幻灯片时，如果当前幻灯片是第三张幻灯片，则添加所需的类：

var yourSlider = $('#lightSlider').lightSlider({
  loop:true,
  pauseOnHover: true,
  onAfterSlide: function (el) {
    var currentSlide = el.getCurrentSlideCount();
    if(currentSlide == 3){
       //add your class
      $('.active').addClass('TESTING');
    } else {
      $('.active').removeClass('TESTING');
    }
  } 
});

我还给你一个fiddle。

【讨论】：

+1 用于提供与插件相关的代码！所以，现在如果我在那里放一个简单的console.log，它就可以工作。每次第三张幻灯片是当前幻灯片时，我都可以在控制台中看到它。但是当我这样做$('.a-class').addClass('animation-class') 时，我看不到 DOM 中的类，动画也不会触发。
@apposolis，我稍微更改了代码。使用 onAfterSlide 代替 onBeforeSlide。我也给你做了个小提琴。检查我的答案。现在它正在添加类。
谢谢！我也得到了它与onAfterSlide 的合作！但问题是，即使我使用toggleClass，它也不是每次幻灯片都是最新的。只有一次。感谢您的帮助。我接受这个作为答案。
aa 并通过添加 else 语句使其正常工作。感谢您的帮助
太棒了。很高兴我能帮上忙。