我有一个滑块(flexslider),可以动态地将“flex-active-slide”类添加到活动<li>
。
当特定幻灯片具有“flex-active-slide”类时,我想使用jQuery做某事。我尝试了以下方法,但它不起作用,因为.flex-active-class在运行之后即时添加:
if ( $('#slider li.about').is('.flex-active-slide') ){
$('.nav li.about').show();
}
在我的研究中,似乎我想使用on(),但我看到的所有示例都将它与click()或hover()等事件联系起来。这不是由类似的东西引发的 - 该类只是“出现”。我无法弄清楚如何格式化它。像这样......?
$(document).on('???',".flex-active-slide", function() {
$(".nav li.about").show();;
})
我确信这是令人尴尬的错误......我感谢你能给予的任何帮助!!
注意:我不能简单地使用CSS,因为我试图影响的.nav与滑块div完全无关。
更新:以下是flexslider.js中的代码,用于控制添加flex-active-slide类。这里有什么东西可以暗示我能做什么吗?
slider.flexAnimate = function(target, pause, override, withSync, fromNav) {
if (asNav && slider.pagingCount === 1) slider.direction = (slider.currentItem < target) ? "next" : "prev";
if (!slider.animating && (slider.canAdvance(target, fromNav) || override) && slider.is(":visible")) {
if (asNav && withSync) {
var master = $(vars.asNavFor).data('flexslider');
slider.atEnd = target === 0 || target === slider.count - 1;
master.flexAnimate(target, true, false, true, fromNav);
slider.direction = (slider.currentItem < target) ? "next" : "prev";
master.direction = slider.direction;
if (Math.ceil((target + 1)/slider.visible) - 1 !== slider.currentSlide && target !== 0) {
slider.currentItem = target;
slider.slides.removeClass(namespace + "active-slide").eq(target).addClass(namespace + "active-slide");
target = Math.floor(target/slider.visible);
} else {
slider.currentItem = target;
slider.slides.removeClass(namespace + "active-slide").eq(target).addClass(namespace + "active-slide");
return false;
}
}
...
答案 0 :(得分:2)
蛮力的方式就是轮询它。
var poll = function(){
if ( $('#slider li.about').is('.flex-active-slide') ){
$('.nav li.about').show();
} else {
setTimeout(poll,500); // Sets how often to check in milliseconds
}
}
该代码将每半秒检查一次元素,然后在第一次看到该元素时停止检查。如果要在页面打开时继续检查元素,请从其他位置取出setTimeout。
更聪明的方法是使用回调。 Flexslider有一些不同的回调。我在这里使用后回调,这将在每张幻灯片动画后执行。
$(document).ready(function() {
$('.flexslider').flexslider({
after: function(slider) {
if($('#slider li.about').is('.flex-active-slide')) {
$('.nav li.about').show();
}
}
});
});
你必须在正确的元素上调用它。我正在使用.flexslider
,但您需要为flexslider实例指定一个标识符。
您可以使用if($('#slider li.about').is('.flex-active-slide'))
替换if(slider.currentSlide == 3)
以在第三张幻灯片后触发show()事件。 Flexslider在其主页的高级部分中提供了有关此内容的更多详细信息。 http://www.woothemes.com/flexslider/
答案 1 :(得分:1)
您可以使用MutationObservers来检测对DOM的更改:https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver。它们并不像jQuery那么简单,但非常有用。
答案 2 :(得分:0)
尝试使用hasClass
方法而不是is
。
示例:
if ( $('#slider li.about').hasClass('flex-active-slide') ){
$('.nav li.about').show();
}
答案 3 :(得分:0)
如果您不介意搞乱jQuery,可以使用jquery.hook plugin并尝试以下方法:
$.hook('addClass');
$('#slider').delegate('onaddClass', function() {
if ( $(this).hasClass('flex-active-slide') )
{
$(".nav li.about").show();
}
});
尽管如此,我还没有尝试过,我不确定它是否会影响您网页的效果:/如果你尝试这个以及它是怎么回事,请告诉我..
答案 4 :(得分:0)
编辑flexslider脚本将是最简单的解决方案imho(因为我自己没有使用过Flexslider)。找到flex-active-slide`类被切换的行(也可能是if else子句),并直接在那里输入你的函数。
如果你不想编辑文件,那么使用好的'setInterval
函数会有另一种更“重量级”的方式。你有类似的东西:
setInterval(function() {
if ( $('#slider li.about').hasClass('.flex-active-slide') ){
$('.nav li.about').show();
};
},200);
这将每200毫秒触发一次函数,检查你的li.about是否有类。
还有一种新方法,称为webworkers,基本上是在后台运行的脚本,无需使用缓慢的setInterval()
。我还没有调查过,但它看起来很有趣:MDN Documentation提供了很多关于它的信息。