Javascript 从一个Waypoints.js构造函数中动态定位多个HTML元素

我一直在使用优秀的JS插件来根据用户的视口位置更改CSS类。现在我尝试动态创建这些航路点

我想出了两种不成功的方法

鉴于此HTML：

<div class="emp-question-set fade-up" id="emp-question-set-1"></div>
<div class="emp-question-set fade-up" id="emp-question-set-2"></div>
<div class="emp-question-set fade-up" id="emp-question-set-3"></div>

方法2：使用

getElementsByClassName

  questionsRollIn = new Waypoint({
    element: document.getElementsByClassName('emp-question-set'),
    handler: function(direction) {
      if (direction === 'down') {
        $('emp-question-set').addClass('fade-up-active');
      }
      if (direction === 'up') {
        $('emp-question-set').removeClass('fade-up-active');
      }
    },
    offset: '70%'
  });

---

希望你们中的一位能够提供帮助，提前谢谢。

我认为第一种方法的问题在于错误理解JavaScript闭包是如何工作的。当来自Java或C#等语言时，这有时会令人困惑。请注意，局部变量对于事件处理程序所在的闭包是全局的。最后，在执行事件时，局部变量“selectorJquery”可能包含意外内容。 您可以通过将变量的内容记录到JavaScript控制台来验证这一点

第二种方法可能无法工作，因为您似乎试图绑定一组元素，而JSAPI可能只需要一个元素

您可以这样尝试（未经测试）

这与您的第一种方法有些相似。

---

这里的想法是使用class

.emp question set

迭代所有元素，并为每个元素创建一个航路点对象。重要的是，我们要确保每个处理程序都生活在自己的闭包中。因此不可能发生变量冲突。

我对闭包概念的第一个答案投了赞成票，但似乎它实际上并没有解决问题。执行以下操作应该可以解决您的问题

$('.emp-question-set').each(function(){
     questionsRollIn = new Waypoint({
     element: $(this), //this is now jquery loop context(this question)
     handler: function(direction) {
       if (direction === 'down') {
         $(this.element).addClass('fade-up-active'); //this is now the waypoint context
       }
       if (direction === 'up') {
         $(this.element).removeClass('fade-up-active');
       }
     },
     offset:"10%" //this can be modified based on how sensitive you want it
    });
});

---

$（this.element）应该是您更改css类的选择器

，使用

this

可以避免闭包问题？我编辑了答案，让您知道我想要什么。是的，我指的是当前的航路点对象，在这个模型中，如何在循环中生成函数？看来还是不行。另外，我需要将jQuery排除在这个实现之外。它需要是直截了当的JS.jquery不应该是你的问题。您可以说document.getElementsByClassName（“emp问题集”）.forEach（function（）{和上面的代码在这里。使用this.element代替$（this.element}）；我已经测试了上述解决方案，效果很好。顺便说一句，在你最初的帖子中，你确实使用了jqueryI对闭包概念的答案进行了投票，但你给出的解决方案仍然不能解决闭包问题。在循环的末尾，将有最后一个问题对象

// just in case we need the waypoints later on
var waypoints = [];

$('.emp-question-set').each(function(index, value) {

    var that = $(value)

    var waypoint = new Waypoint({
        element: value,
        handler: function(direction) {
            if (direction === 'down') {
                that.addClass('fade-up-active');
            }
            if (direction === 'up') {
                that.removeClass('fade-up-active');
            }
            },
            offset: '70%'
    });
    waypoints.push(waypoint);
});

$('.emp-question-set').each(function(){
     questionsRollIn = new Waypoint({
     element: $(this), //this is now jquery loop context(this question)
     handler: function(direction) {
       if (direction === 'down') {
         $(this.element).addClass('fade-up-active'); //this is now the waypoint context
       }
       if (direction === 'up') {
         $(this.element).removeClass('fade-up-active');
       }
     },
     offset:"10%" //this can be modified based on how sensitive you want it
    });
});