只有在添加了另一個類時纔將類添加到元素中

我知道這個問題可能有類似的重複項，但找不到解決方案。我有一個3滑塊滑塊。該插件是lightslider。我想要實現的是每當第三個滑塊處於當前狀態時，都會將css動畫發送到元素。我注意到一類active正在被添加到當前幻燈片，然後，這張幻燈片是當前可見的，如下面的截圖所示。只有在添加了另一個類時纔將類添加到元素中

所以我最初的想法是以下幾點。抓住特定元素，例如svg-slide，檢查元素是否具有active的類別，如果是，請添加觸發動畫的css類。

我對代碼：

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

與這一個問題是，並糾正我，如果我錯了，當頁面加載，類active是一號幻燈片，所以代碼已經檢查了svg-slide沒有active類，並且之後它什麼都不做。任何幫助，將不勝感激。

來源

2016-07-29 appostolis

我保存編輯的那一刻就寫下了評論。不管怎麼說，多謝拉。）。我的代碼沒有語法錯誤btw。 – appostolis

爲什麼不使用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。

來源

2016-07-29 13:41:02 Ionut

+1提供與插件相關的代碼！所以，現在如果我在那裏放置一個簡單的'console.log'，它就可以工作。每當第三張幻燈片是當前的時候，我都可以在控制檯中看到它。但是當我做這個'$（'。a-class'）。addClass（'animation-class'）'時，我看不到DOM中的類沒有動畫引發。 – appostolis

@appostolis，我改了一下代碼。使用onAfterSlide而不是onBeforeSlide。我也讓你成爲小提琴。檢查我的答案。現在它添加了這個類。 – Ionut

謝謝！我也用'onAfterSlide'工作了！但問題是，即使我使用'toggleClass'，每次當前幻燈片都不起作用。只有一次。感謝您的幫助順便說一句。我接受這個答案。 – appostolis

只有在添加了另一個類時纔將類添加到元素中

回答

相關問題