只有在添加了另一个类时才将类添加到元素中

我知道这个问题可能有类似的重复项，但找不到解决方案。我有一个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

只有在添加了另一个类时才将类添加到元素中

回答

相关问题