脚本不适用于无限滚动加载的元素 [英] Script doesn't work on elements loaded with infinite scrolling

问题描述

我在tumblr页面上使用了此脚本，该页面为帖子提供了不同的随机文本颜色:

I'm using this script on my tumblr page, which gives posts different random text colors:

function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
    color += letters[Math.round(Math.random() * 15)];
}
return color;}
$(function() {
$(".post").each(function() {
    $(this).css("color", get_random_color());
}); });

问题是该脚本不适用于无限滚动加载的元素.谁能帮我重写这段代码?我不知道如何可悲地编写JavaScript.

The thing is the script isn't working for elements loaded with infinite scrolling. Can anyone help me rewrite this code? I don't know how to write javascript sadly.

推荐答案

看看您博客的main.js脚本.当您从另一个页面获取新元素时，可以调用自定义函数.这是我对您的main.js文件的建议修订.

Take a look at your blog's main.js script. You can call your custom function when you grab the new elements from another page. This is my proposed revision of your main.js file.

$(window).load(function () {
var $wall = $('#content');
$wall.imagesLoaded(function () {
    $wall.masonry({
        itemSelector: '.post',
        isAnimated: false
    });
});
$wall.infinitescroll({
    navSelector: '#pagination',
    nextSelector: '#pagination li a.pagination_nextlink',
    itemSelector: '.post',
    loadingImg: "http://static.tumblr.com/kwz90l7/bIdlst7ub/transparent.png",
    loadingText: " ",
    donetext: " ",
    bufferPx: 100,
    debug: false,
    errorCallback: function () {
        $('#infscr-loading').animate({
            opacity: .8
        }, 2000).fadeOut('normal');
    }
}, function (newElements) {
    var $newElems = $(newElements);
    $newElems.hide();
    $newElems.each(function(value){
        value.css("color", get_random_color());
    });
    $newElems.imagesLoaded(function () {
        $wall.masonry('appended', $newElems, {
            isAnimated: false,
            animationOptions: {
                duration: 900,
                easing: 'linear',
                queue: false
            }
        }, function () {
            $newElems.fadeIn('slow');
        });
    });
    $(document).ready(function () {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            deeplinking: false,
            default_width: 600,
            default_height: 550,
            allow_resize: true,
        });
    });
});
$('#content').show(500);
});

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
         color += letters[Math.round(Math.random() * 15)];
    }
    return color;
 }

我要做的是添加您的get_random_color函数，并在Infinite Scroll调用中对其进行调用，以向$newElems中的每个元素添加自定义颜色，因此，实际上，我所做的全部都是您的代码并以与您尝试执行的操作不同的方式进行了集成，这是行不通的.从理论上讲，这应该起作用.如果没有，或者您有问题，请告诉我.

What I've done is add your get_random_color function and called it from within the Infinite Scroll call to add a custom color to each of the elements in $newElems so really, all I've done is taken your code and integrated it differently than what you were trying to do, which wasn't working. This should, theoretically, work. If it doesn't or you have questions, let me know.

这篇关于脚本不适用于无限滚动加载的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！