jQuery 代码打乱了其余代码

Question

这个 jQuery 代码作为 jQuery Waypoints 的一部分弄乱了它下面的所有 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 都失败了。

我还发现，如果我为其他页面上的元素添加其他这些代码块，则顶部代码下方其他页面的 Waypoint 代码块会失败！

另外，我发现这是唯一的（相关的）控制台错误：未捕获的类型错误：无法读取未定义的属性 ‘top’ – jquery.waypoints.min.js:7

Answer 1

我通过使用适合我的情况的不同调用方法 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%'
})

感谢大家的帮助。

jQuery 代码打乱了其余代码

jQuery code messing up rest of code

javascript

jquery

jquery-waypoints