时间戳

首页 > 解决方案 > 仅在 tumblr 第一页上的脚本和 css 函数

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

问题描述

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

标签： javascriptcsstumblr

解决方案

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

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

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

相关链接：

推荐阅读