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

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
  }
}

该代码将每半秒检查一次元素，然后在第一次看到该元素时停止检查。如果您想在页面打开时继续检查元素，请从 else 中取出 setTimeout。

更聪明的方法是使用回调。 Flexslider 有几个不同的回调。我在这里使用 after 回调，这将在每张幻灯片动画后执行。

$(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 脚本将是最简单的解决方案恕我直言（因为我自己没有使用过 Flexslider）。找到 flex-active-slide` 类被切换的那一行（这可能也是一个 if else 子句），然后直接在那里输入你的函数。

如果您不想编辑文件，还有另一种更“注重性能”的方法，使用良好的 ol'setInterval 函数。你会有类似的东西：

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

这将每 200 毫秒触发一个函数，检查您的 li.about 是否具有该类。

还有一种新的方法，称为 webworkers，基本上是在后台运行的脚本，无需使用缓慢的 setInterval()。我还没有调查它，但它似乎很有趣：MDN Documentation 提供了大量有关它的信息。