Tumblr Like 按钮不起作用

Question

我正在设计一个同时使用 Masonry 和无限滚动代码的 tumblr 主题。 The infinite scrolling code is here，如果您需要查看它。点赞按钮在所有帖子上都正确显示，并且适用于前几篇帖子，但不适用于新加载的帖子。

每个帖子都添加了 {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 ); 
});

1. isAnimated:true 将出错，因为它是用于调用 masonry 的键/值

点赞按钮

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

1. $newElemsIDs 从未定义或填充
2. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);会因为上面的原因报错
3. Tumblr.LikeButton.get_status_by_post_ids() 只有在 infiniteScroll 结果包含视频帖子时才会被调用
4. }); 不见了

砌体

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

1. $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();
            });
        }
    );
});