0

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

5 回答 5

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

该代码将每半秒检查一次元素，然后在第一次看到元素时停止检查。如果您想在页面打开时继续检查元素，请从 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 实例指定一个标识符。

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

于 2013-08-15T02:42:03.220 回答
1

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

于 2013-08-15T01:50:00.237 回答
0

尝试使用该hasClass方法而不是is.

例子：

if ( $('#slider li.about').hasClass('flex-active-slide')  ){  
   $('.nav li.about').show();
}
于 2013-08-15T01:49:58.713 回答
0

如果您不介意弄乱 jQuery，您可以使用jquery.hook 插件，或许可以尝试以下方法：

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

不过，为了全面披露，我还没有尝试过，我不确定它是否会影响您页面的性能：/ 如果您尝试此操作以及效果如何，请告诉我..

于 2013-08-15T01:59:56.020 回答
0

编辑 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 文档提供了大量关于它的信息。

于 2013-08-15T02:45:35.860 回答