仅在添加另一个类时才将类添加到元素

Question

我知道这个问题可能有类似的重复，但我无法找到解决方案。我有一个带3张幻灯片的滑块。该插件是lightslider。我想要实现的是每次第3个滑块是当前时，都会向元素发出css动画。我注意到当前幻灯片中添加了一类<script src="/wp-includes/js/masonry.pkgd.min.js"></script> <script src="/wp-includes/js/colorfinder-1.1.js"></script> <script src="/wp-includes/js/imagesloaded.pkgd.min.js"></script> <!-- Close script tag here after quotes --> <script src="/wp-includes/js/classie.js"></script> <script src="/wp-includes/js/gridScrollFx.js"></script> ，此幻灯片是当前可见的，如下面的屏幕截图所示。

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

我的代码：

active

这个的问题是，如果我错了，请纠正我，当页面加载时，if ( $('.svg-slide').hasClass('active') ) { $('.svg-slide').addClass('fire-animation'); } 的类位于第一张幻灯片上，因此代码已经检查了{{ 1}}没有active类，之后什么也没做。任何帮助将不胜感激。

Answer 1

为什么不在getCurrentSlideCount事件中使用onAfterSlide方法？在更改幻灯片时，如果当前幻灯片是第三张幻灯片，则添加所需的课程：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我也让你成为fiddle。