Tumblr Like 按钮不起作用

Question

我正在设计一个同时使用 Masonry 和无限滚动代码的 tumblr 主题。 The infinite scrolling code is here，如需查看。赞按钮在所有 post 上都能正确显示，并且在前几个 post 上有效，但在新加载的 post 上不起作用。

每个 post 都添加了 {PostID} id。我对Javascript的理解真的很差，所以我认为这就是问题所在：

$(function(){
    var $container = $('#content');
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.entry',
            isAnimated:true,
            columnWidth:1,
            animationOptions:{duration:350, queue:false},
            isFitWidth: true,
        });
    });

    $container.infinitescroll({
            navSelector  : '#page-nav',    // selector for the paged navigation 
            nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
            itemSelector : '.entry',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: '{lang:No more posts}',
                img: 'http://24.media.tumblr.com/tumblr_m3j5g3KlEm1r0fipko8_r1_100.gif'
            }
        },
        // trigger Masonry as a callback
        function( newElements ){
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $newElems.animate({ opacity: 1 });
                isAnimated:true
                $container.masonry( 'appended', $newElems, true ); 
            });
            // videos
            $newElems.find('.video').each(function(){
                resizeVideos();
                console.log($newElems, $newElemsIDs);
                Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
            },
            function(){
                $container.masonry();
            });
        }
    );
});

如有任何帮助，我们将不胜感激！

Answer 1

虽然这个问题是重复的，但它是一个不完整的复制/面食噩梦。

已加载图像

$newElems.imagesLoaded(function(){
    // show elems now they're ready
    $newElems.animate({ opacity: 1 });
    isAnimated:true
    $container.masonry( 'appended', $newElems, true ); 
});

isAnimated:true 将出错，因为它是用于调用 masonry

赞按钮

$newElems.find('.video').each(function(){
    resizeVideos();
    console.log($newElems, $newElemsIDs);
    Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
},

$newElemsIDs 从未定义或填充
Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);会因为上面的
Tumblr.LikeButton.get_status_by_post_ids() 只有在 infiniteScroll 结果包含视频 post
}); 缺失

砌体

function(){
    $container.masonry();
});

$container.masonry( 'appended', $newElems, true ); 已经告诉 masonry 有新项目，不需要再次调用它

全意大利面

$(function(){
    var $container = $('#content');
    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.entry',
            isAnimated:true,
            columnWidth:1,
            animationOptions:{duration:350, queue:false},
            isFitWidth: true,
        });
    });

    $container.infinitescroll({
            navSelector  : '#page-nav',    // selector for the paged navigation 
            nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
            itemSelector : '.entry',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: '{lang:No more posts}',
                img: 'http://24.media.tumblr.com/tumblr_m3j5g3KlEm1r0fipko8_r1_100.gif'
            }
        },

        // trigger Masonry as a callback
        function( newElements ) {

            // hide new elements
            var $newElems = $( newElements ).css({ opacity: 0 });

            // create $newElemsIDs
            var $newElemsIDs = $newElems.map(function () { 
                return this.id; 
            }).get();

            // give tumblr the $newElemsIDs
            Tumblr.LikeButton.get_status_by_post_ids( $newElemsIDs );

            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded( function() {

                // tell masonry we have added new elems
                $container.masonry( 'appended', $newElems, true ); 

                // show $newElems
                $newElems.animate({ opacity: 1 });
            });

            // resize videos for $newElems
            $newElems.find('.video').each( function() {
                resizeVideos();
            });
        }
    );
});

Tumblr Like 按钮不起作用

Tumblr Like Button Not Working

javascript

jquery

tumblr