javascript - jQuery Waypoints 仅处理具有指定类的第一个元素

Question

我正在尝试实现 jQuery Waypoints 插件，以便在任何具有 .foo 类的元素进入视口(viewport)时将 .active 类添加到该元素:

<div class="foo"></div>
<div class="foo"></div>

var inview = new Waypoint.Inview({
  element: $('.foo')[0],
  entered: function(direction) {
    $(this.element).addClass("active");
  }
});

JS fiddle :http://jsfiddle.net/g6mouxnd/

上面的示例仅将 .active 类添加到第一个 .foo 容器。 如何使其适用于第二个和任何后续 .foo 容器？

Answer 1

您可以循环遍历每个 .foo 并为每个创建一个 Inview:

$('.foo').each(function() {
  new Waypoint.Inview({
    element: this,
    entered: function(direction) {
      $(this.element).addClass('active');
    }
  });
});