Waypoints 和 Inview，使用通配符选择器跟踪多个元素答案

【问题标题】：Waypoints and Inview, tracking multiple elements using wildcard selectorWaypoints 和 Inview，使用通配符选择器跟踪多个元素
【发布时间】：2017-02-20 15:30:47
【问题描述】：

我在一个页面上有多个部分，ID 为 ss-section-story ss-section-problem ss-section-solution，我试图跟踪每个部分何时进入和退出视口。问题是，使用当前代码，我只跟踪 ID 为 ss-section 的第一部分。我希望能够跟踪每个部分的进入和退出。

var inview = new Waypoint.Inview({
element: $('section[id^="ss-section"]')[0],
enter: function(direction) {
  console.log(this.element.id + ' enter');
},
entered: function(direction) {
  console.log(this.element.id + ' entered');
},
exit: function(direction) {
  console.log(this.element.id + ' exit');
},
exited: function(direction) {
  console.log(this.element.id + ' exited');
}
})

我知道它必须只跟踪第一部分，因为在 element 选项上，它被限制为该数组中的 [0]，但是当我删除它时，我将在这些 console.log 语句中得到未定义。

我希望能够做到这一点，但是从文档来看，它没有这样的语法：

$('section[id^="ss-section"]').Waypoint.Inview({
enter: function(direction) {
  console.log(this.element.id + ' enter');
},
entered: function(direction) {
  console.log(this.element.id + ' entered');
},
exit: function(direction) {
  console.log(this.element.id + ' exit');
},
exited: function(direction) {
  console.log(this.element.id + ' exited');
}
})

关于如何仅使用 Waypoint.Inview 的一个实例来跟踪每个单独部分的任何建议

【问题讨论】：

标签： javascript jquery jquery-waypoints inview

【解决方案1】：

首先，你可以收藏：

var $collection = $('section[id^="ss-section"]');

然后你通过它进行迭代：

$collection.each(function () {
   new Waypoint.Inview({
      element: this,
      enter: function(direction) {
         console.log(this.element.id + ' enter');
      },
      entered: function(direction) {
         console.log(this.element.id + ' entered');
      },
      exit: function(direction) {
         console.log(this.element.id + ' exit');
      },
      exited: function(direction) {
         console.log(this.element.id + ' exited');
      }
   })
})

就是这样。至少它对我有用。

【讨论】：