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代码块就会失败！

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

Answer 1

我通过使用一种不同的方法来解决这个问题，这种方法适用于我的情况，例如：

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代码弄乱了其余的代码

1 个答案: