Tumblr喜欢按钮不起作用

Question

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

每个帖子都添加了{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);会出错 如果Tumblr.LikeButton.get_status_by_post_ids()结果包含视频帖子
，则只会调用
3. 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();
            });
        }
    );
});