使用jquery来定位动态添加的类吗? [英] Use jquery to target classes that are added dynamically?

问题描述

我有一个滑块(flexslider)，可将类"flex-active-slide"动态添加到活动的<li>中.

I have a slider (flexslider) that dynamically adds the class "flex-active-slide" to the active <li>.

当特定的幻灯片具有"flex-active-slide"类时，我想使用jQuery进行操作.我尝试了以下操作，但是它不起作用，因为.flex-active-class是在运行后立即添加的:

I want to use jQuery to do something when a specific slide has the class "flex-active-slide." I tried the following, but it doesn't work because the .flex-active-class is added on the fly after this has already run:

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

在我的研究中，似乎我想使用on()，但是我看到的所有示例都将其与诸如click()或hover()之类的事件相关联.这不是由诸如此类的东西触发的-只是该类出现".我不知道如何格式化它.像这样...?

In my research, it seems I want to use on(), but all the examples I see relate it to an event like click() or hover(). This isn't triggered by anything like that -- the class just "appears." I can't figure out how to format it. Something like this...?

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

我敢肯定这是令人尴尬的错误……感谢您能提供的任何帮助！

I'm sure that is embarrassingly incorrect... I appreciate any help you can give!!

注意:我不能简单地使用CSS，因为我要影响的.nav与滑块div完全无关.

Note: I can't simply use CSS because the .nav I'm trying to affect is completely unrelated to the slider div.

更新:这似乎是flexslider.js中控制添加flex-active-slide类的代码.这里有什么建议可以做的吗?

UPDATE: Here is what appears to be the code in the flexslider.js that controls adding the flex-active-slide class. Is there anything here that suggests anything I could do?

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

推荐答案

暴力破解方法是对其进行轮询.

The brute force way is to poll it.

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移到else之外.

That code will keep checking for the element every half a second, and then stop checking once it sees the element for the first time. If you want to keep checking for the element whenever the page is open, take the setTimeout out of the else.

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

The smarter way to do it is with a callback. Flexslider has a few different callbacks. I'm using the after callback here, this will execute after each slide animates on.

$(document).ready(function() {
  $('.flexslider').flexslider({
    after: function(slider) {
      if($('#slider li.about').is('.flex-active-slide')) {
        $('.nav li.about').show();
      }
    }
  });
});

您必须在正确的元素上调用它.我正在使用.flexslider，但是您需要为flexslider实例指定一个标识符.

You have to call this on the correct element. I'm using .flexslider, but you will need to specify an identifier for your flexslider instance.

您可以将if($('#slider li.about').is('.flex-active-slide'))替换为if(slider.currentSlide == 3)，以在第三张幻灯片之后触发show()事件. Flexslider在其主页的高级部分中提供了有关此操作的更多详细信息. http://www.woothemes.com/flexslider/

You can replace if($('#slider li.about').is('.flex-active-slide')) with something like if(slider.currentSlide == 3) to trigger your show() event after the third slide. Flexslider has more details about this in the advanced section on their home page. http://www.woothemes.com/flexslider/

这篇关于使用jquery来定位动态添加的类吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！