僅當添加另一個類時，將類添加到元素

Question

我知道這個問題可能有相似的重復項，但找不到解決方案。 我有一個帶有3張幻燈片的滑塊。 該插件是lightslider 。 我要實現的是，每當第三個滑塊為當前滑塊時，將一個CSS動畫觸發到一個元素上。 我注意到當前正在向當前幻燈片添加一個active類別，該幻燈片是當前可見的，如下面的屏幕截圖所示。

所以我最初的想法是以下。 抓取特定元素，即svg-slide ，檢查該元素是否具有active類，如果是，則添加觸發動畫的css類。

我的代碼：

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

這個問題是，如果我錯了，請糾正我，即頁面加載時， active類位於第一張幻燈片上，因此代碼已檢查svg-slide沒有active類，並且之后它什么也不做。 任何幫助，將不勝感激。

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

我也給你開了個小提琴 。