脚本和css函数仅在tumblr的第一页上

Question

我有一个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);

Answer 1

您将无序动作绑定到jQuery的$(document).ready()，该are在文档加载完成时调用一次。InfiniteScroll库通常通过AJAX查询下一个页面并将结果加载到现有页面中。这不会触发ready()回调，因此不会为脚本加载的任何页面调用随机代码。

要解决此问题，请检查您选择的infiniteScroll库是否支持添加回调。然后，您可以在脚本加载完下一个页面后执行shuffle函数，例如onNextPage(shuffle)。我无法在答案中添加代码片段，因为您没有说明如何实现无限滚动。

如果在.ready()回调中通过JavaScript绑定，则悬停也是如此。

相关链接：

• jQuery ready callback
• Example of events implemented in a popular inf. scroll library
• jQuery AJAX