我有一个 tumblr 页面，无限滚动已激活，上面有一些帖子(照片)。有一个随机化帖子的脚本，但它只适用于出现在第一页上的帖子(因此，当滚动从第二页获取帖子时，脚本不再工作)。此外，帖子上有一个 css 悬停效果，显示帖子标题，但这也适用于第一页的帖子。
我该怎么做才能使脚本和 css 在页面的整个长度上工作。
这是页面:https://www.vul-ne-ra-bil.ro/
这是打乱帖子的脚本:
function shuffle() {
var tiles = $(".photo:not('.shuffled')");
for(var i = 0; i < tiles.length; i++){
tiles[i].addClass('shuffled')
var target = Math.floor(Math.random() * tiles.length -1) + 1;
var target2 = Math.floor(Math.random() * tiles.length -1) +1;
tiles.eq(target).before(tiles.eq(target2));
}
}
$(document).ready(shuffle);
最佳答案
您将 shuffle 操作绑定(bind)到 jQuery 的 $(document).ready()，它在文档完成加载时调用一次。 InfiniteScroll 库通常通过 AJAX 查询下一页并将结果加载到现有页面来工作。这不会触发 ready() 回调，因此不会为脚本加载的任何页面调用 shuffle 代码。
要解决此问题，请查看您选择的 infiniteScroll 库是否支持添加回调。然后，您可以在脚本完成加载下一页后执行 shuffle 函数，例如onNextPage(随机播放)。我无法在答案中添加一个片段，因为您没有说明您是如何实现无限滚动的。
如果在 .ready() 回调中通过 JavaScript 绑定(bind)悬停，则悬停也是如此。
相关链接:
关于javascript - 脚本和 css 功能仅在 tumblr 的第一页上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51099026/