【问题标题】:Making Tumblr Like button clickable with Infinite Scroll (v3 by Dave DeSandro)使用 Infinite Scroll 使 Tumblr Like 按钮可点击(Dave DeSandro 的 v3)
【发布时间】:2019-06-19 21:49:33
【问题描述】:

我知道这个问题已被多次询问和回答,但由于我缺乏 JavaScript 知识,我仍然无法让我的主题(使用 Masonry + Infinite Scroll)正常工作...。点赞按钮不可点击对于那些使用无限滚动加载的帖子。我觉得20789608(2014 年 3 月 5 日更新的答案)非常接近我的需要,但仍然无法让我的工作(不知道如何正确合并/应用)。这是我的代码(仅相关部分)。

JS

<script type="text/javascript">
jQuery(function($){
// with masonry & jQuery
// init masonry
var $grid = $('.grid').masonry({
// masonry options
    itemSelector: '.grid-item',
    columnWidth: 400,
    gutter: 20,
    fitWidth: true,
});

// get masonry instance
var msnry = $grid.data('masonry');

// layout masonry after each image loads
$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

{block:IfInfiniteScroll}
// init infinite scroll
$grid.infiniteScroll({
// infinite scroll options
    path: '.pagination_next',
    append: '.for_infinite_scroll',
    outlayer: msnry,
    status: '.page-load-status',
});
{/block:IfInfiniteScroll}
});
</script>

HTML

<div id="content" class="grid">
{block:Posts}
    <article class="{PostType}{block:PermalinkPage} {block:Date}not-{/block:Date}page{/block:PermalinkPage} {TagsAsClasses} for_infinite_scroll">
{block:Text}
    <div class="post grid-item">
        {block:Title}
        <h1><a href="{Permalink}">{Title}</a></h1>
        {/block:Title}
        <div>
        {Body}
        </div>
    </div><!-- .post grid-item -->
{/block:Text}

如果您能帮我解决这个问题,我们将不胜感激。提前致谢!

【问题讨论】:

    标签: tumblr infinite-scroll tumblr-themes


    【解决方案1】:

    看来我找到了解决方案。用以下代码替换 {block:IfInfiniteScroll} 和 {/block:IfInfiniteScroll} 之间的代码似乎可行。

    {block:IfInfiniteScroll}
    // init infinite scroll
    $grid.infiniteScroll({
    // infinite scroll options
        path: '.pagination_next',
        append: '.for_infinite_scroll',
        outlayer: msnry,
        status: '.page-load-status',
    });
    // making like buttons work using infinite scroll
    $grid.on('append.infiniteScroll',function(e,r,p,items){
        var $newElems = $(items);
        var $newElemsIDs = $newElems.map(function(){
            return this.id;
            }).get();
            Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
    });
    {/block:IfInfiniteScroll}
    

    【讨论】:

    • 更新:要使上述代码正常工作,需要将 id="{PostID}" 添加到每个帖子中。所以,像
      一样(取决于你的主题是如何写的)。
    猜你喜欢
    • 2021-01-27
    • 2017-03-28
    • 2013-04-29
    • 1970-01-01
    • 1970-01-01
    • 2012-12-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多