使用jQuery的目标动态添加类？(Use jquery to target classes tha

我有一个滑块（flexslider）动态地将所述类“柔性有源滑动”到有源<li>

我想使用jQuery做一些事情，当一个特定的幻灯片有类“柔性有源滑。” 我尝试以下，但它不工作，因为.flex活性类是动态增加后这已经运行：

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

在我的研究，似乎我想使用（），但我看到的例子它涉及到一个事件像click（）或悬停（）。这不是由任何类似的触发 - 只是“出现。”之类的我无法弄清楚如何格式化。事情是这样的......？

$(document).on('???',".flex-active-slide",  function() {
    $(".nav li.about").show();;
    })

我敢肯定，是不正确尴尬......我感谢所有帮助你可以给！

注：我不能简单地使用CSS，因为我试图影响.nav是完全无关的滑块股利。

更新：这里是什么似乎是在控制添加Flex的主动型滑类flexslider.js的代码。有什么在这里，说明什么是我能做？

 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)之后第三触发你的节目（）事件滑动。 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插件，也许尝试以下操作：

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

为了充分披露，虽然，我没有试过，我不知道这是否会影响到你的页面的性能：/让我知道，如果你尝试这样做，它如何去..

Answer 5:

编辑flexslider脚本将是最简单的解决方案恕我直言（因为我没有Flexslider自己使用）。寻找到柔性有源slide`类是触发线（这可能也是如果else子句），并输入你的函数直接出现。

如果你不想编辑文件，存在使用好醇”另一个更“表现重”的方式setInterval功能。你会碰到这样的：

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

这将触发一个函数每200毫秒检查，如果你的li.about有类。

还有这样一来，所谓的webworkers的一种新的方式，基本上是在后台工作，无需使用脚本低迷setInterval() 我没有调查过，但似乎很有意思： MDN文档有关它的信息的一个很好的协议。

文章来源: Use jquery to target classes that are added dynamically?