Javascript jQuery代码弄乱了其余的代码

这个jQuery代码作为它的一部分，把它下面的所有jQuery代码都弄乱了，请问怎么了？搞砸了，我的意思是我不相信下面的代码

非常感谢您的帮助，如果您想了解更多详情，请告诉我

var waypoint = new Waypoint({
  element: document.getElementsByClassName('social-section-3'),
  handler: function(direction) {
      if (direction === 'down') {
          $('.social-bg-tennis-video').get(0).pause();
          $('.social-bg-events-video').get(0).play();
      }
      if (direction === 'up') {
          $('.social-bg-tennis-video').get(0).play();
          $('.social-bg-events-video').get(0).pause();
      }
  }
});

var waypoint = new Waypoint({
  element: document.getElementsByClassName('home-section-5'),
  handler: function(direction) {
      if (direction === 'down') {
          $('.home-bg-social-video').get(0).play();
      }
      if (direction === 'up') {
          $('.home-bg-social-video').get(0).pause();
      }
  }
});

var waypoint = new Waypoint({
  element: document.getElementsByClassName('coaching-section-3'),
  handler: function(direction) {
      if (direction === 'down') {
          $('.coaching-bg-private-video').get(0).pause();
          $('.coaching-bg-junior-video').get(0).play();
      }
      if (direction === 'up') {
          $('.coaching-bg-private-video').get(0).play();
          $('.coaching-bg-junior-video').get(0).pause();
      }
  }
});
var waypoint = new Waypoint({
  element: document.getElementsByClassName('coaching-section-4'),
  handler: function(direction) {
      if (direction === 'down') {
          $('.coaching-bg-junior-video').get(0).pause();
          $('.coaching-bg-mini-video').get(0).play();
      }
      if (direction === 'up') {
          $('.coaching-bg-junior-video').get(0).play();
         $('.coaching-bg-mini-video').get(0).pause();
      }
  }
});

更新

我发现我可以添加尽可能多的

var waypoint_coachingsection3 = new Waypoint({
  element: document.getElementsByClassName('coaching-section-3'),
  handler: function(direction) {
      if (direction === 'down') {
          $('.coaching-bg-private-video').get(0).pause();
          $('.coaching-bg-junior-video').get(0).play();
      }
      if (direction === 'up') {
          $('.coaching-bg-private-video').get(0).play();
          $('.coaching-bg-junior-video').get(0).pause();
      }
  }
});

…正如我喜欢的代码一样，Waypoints代码可以工作，尽管此代码下面或上面任何不相关的jQuery都会失败

我还发现，如果我为其他页面上的元素添加其他代码块，则顶部代码下方其他页面的航路点代码块将失败

此外，我发现这是唯一相关的控制台错误：

---

未捕获类型错误：无法读取未定义的属性“top”–jquery.waypoints.min.js:7

我通过使用另一种方法调用适用于我的情况的waypoints修复了此问题，例如：

var waypoints = $('.coaching-section-3').waypoint({
  handler: function(direction) {
      if (direction === 'down') {
          $('.coaching-bg-private-video').get(0).pause();
          $('.coaching-bg-junior-video').get(0).play();
      }
      if (direction === 'up') {
          $('.coaching-bg-private-video').get(0).play();
          $('.coaching-bg-junior-video').get(0).pause();
      }
  },
  offset: '30%'
})

---

谢谢大家的帮助。

看起来代码声明并初始化了同一个变量四次。谢谢@Pointy的回复。这是否意味着将“航路点”更改为任何独特的东西？我已经试过了，但到目前为止运气不好——我想你不会改变“航路点”，因为它引用了全局航路点类。你知道吗？我不知道那会造成什么样的问题，但这有点奇怪。如果对航路点实例的引用不必保存以使库正常工作，那么执行任何赋值都没有多大意义。另一方面，如果是的话，那么是的，你需要使用不同的变量名，或者把所有的实例放在一个数组中。嗯，我知道你的意思，但遗憾的是，它没有使它们唯一。还有其他想法吗？看起来选项的'element'属性应该是一个单一的DOM元素，至少在文档中是这样的。GetElementsByCassName返回一个节点列表，该节点列表类似于数组，并且不具有相同的属性供其使用。尝试使用单一元素设置航路点，看看这是否会改变什么。