0

背景：我正在使用 Swipe.js 和 Infinite Ajax Scroll (JQ) 创建一个投资组合网站。

问题：当额外页面的内容被加载到当前页面时，已经加载的 Swipe.js 脚本不会对其进行处理。这意味着新内容的标记没有改变（需要滑动功能才能工作）。

我想我需要在每个页面重新加载后触发 Swipe.js 脚本。那能解决吗？请像我 8 岁一样向我解释这一点。JS不是强项...

演示： http ://hatchcreative.co.nz/tomo

您可以看到，当页面加载新内容时，滑块两侧的按钮不再起作用。

4

1 回答 1

0

是的，您是对的，加载图像后，您必须在这些新元素上创建一个新的 Swipe 实例（因为它们在开始时不存在，当页面加载时）。
根据无限滚动的文档，您可以使用onRenderComplete.

所以你的jQuery.ias构造函数是这样的：

jQuery.ias({
  // ... your settings...
  onRenderComplete: function(items) {
    $(items).each(function(index, element) {
      new Swipe(element);
    });
  }
});

这应该以某种方式工作，但我不确定；我还没有使用这些库。

编辑：
在对您的代码进行更多检查后，我看到您有一些内联点击处理程序，例如：onclick='two.prev();return false;'。

您需要删除它并将您的onclick句柄添加到相同的onRenderComplete函数中。

onRenderComplete: function(items) {
  var swipe;
  $(items).each(function(index, element) {
    swipe = new Swipe(element);
  });

  // find tags with the class 'forward' inside the current element and add the handler
  $(element).find('.forward').on('click', function() {
     swipe.next();
  });
  // ... also for previous
}

顺便说一句：通常你应该为你的重要代码部分提供一个jsFiddle，这样我们更容易解决问题，并且当链接页面发生变化时问题不会过时。

于 2013-02-15T22:27:48.377 回答