Question

我正在使用此脚本在我的帖子上获取随机背景颜色。它在加载页面时工作正常，但是当新帖子加载脚本时不起作用。

这是我用于随机背景颜色的代码：

$(document).ready(function() {
    $('.entry').each(function () {
        var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
        $(this).css("background-color", hue);
    });
});

这是无限滚动/砌体代码：

$(window).load(function () {
    var $content = $('#posts');
    $content.masonry({itemSelector: '.entry'}),
    $content.infinitescroll({
        navSelector : 'div#pagination',
        nextSelector : 'div#pagination a#nextpage',
        itemSelector : '.entry',
        loading: {
            finishedMsg: '',
            img: 'http://static.tumblr.com/vk03xn8/Grsnluvip/ajax-loader.gif'
        },
        bufferPx : 600,
        debug : false,
    },
    function( newElements ) {
        var $newElems = $( newElements );
        $newElems.hide();
        $newElems.imagesLoaded(function(){
            $content.masonry( 'appended', $newElems, true, function(){
                $newElems.fadeIn(1300);
            });
        });
    });
});

如何将两者结合使用，以便在新帖子加载时脚本有效？

Answer 1

在函数中设置随机颜色背景逻辑，在文档就绪时调用它并添加新元素。这可能是例如：

function randColor() {
    $('.entry:not(.randomized)').each(function () {
      var hue = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
      $(this).addClass('randomized').css("background-color", hue);
  });
}

// doc ready
$(randColor);

并附加回调：

$content.masonry( 'appended', $newElems, true, function(){randColor(); $newElems.fadeIn(1300);} );

脚本不会加载无限滚动和砌体

1 个答案: