Question

我有一个滑块（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;
          }
        }
...

Answer 1

蛮力的方式就是轮询它。

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/

Answer 2

您可以使用MutationObservers来检测对DOM的更改：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver。它们并不像jQuery那么简单，但非常有用。

Answer 3

尝试使用hasClass方法而不是is。

示例：

if ( $('#slider li.about').hasClass('flex-active-slide') ){ $('.nav li.about').show(); }

Answer 4

如果您不介意搞乱jQuery，可以使用jquery.hook plugin并尝试以下方法：

$.hook('addClass');
$('#slider').delegate('onaddClass', function() {
    if ( $(this).hasClass('flex-active-slide') )
    {
        $(".nav li.about").show();
    }
});

尽管如此，我还没有尝试过，我不确定它是否会影响您网页的效果：/如果你尝试这个以及它是怎么回事，请告诉我..

Answer 5

编辑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提供了很多关于它的信息。

使用jquery来定位动态添加的类？

5 个答案: