WordPress "Load more"客户端插件，无需 AJAX 调用或 WordPress 查询

Question

我的页面上有超过 100 个 li 元素。我想显示前 5 个 li 元素和一个“加载更多”按钮。当我单击“加载更多”按钮时，它会显示接下来的五个记录，并且当页面上没有更多可用的 li 记录时，“加载更多”按钮将禁用。我不想使用任何 ajax 调用，也不需要 WordPress 查询。

<ul class="paging-example">
    foreach ($resultset as $idx => $row)
    {
        if($row->Type == '1')
        {
            echo "<li><a href='#'>" . $row->Title . "</a></li>";
        }

    }
echo '</ul>';

Answer 1

好吧，我们按照您所说的方式进行操作，有 100 个列表项，但只显示前五个，然后在单击“加载更多”时显示更多内容:

首先在你的 php 中:

echo '<ul class="paging-example">';
$counter = 0;
    foreach ($resultset as $idx => $row)
    {
        if( $row->Type == '1' )
        {
            echo "<li style='" . ( $counter >= 5 ? 'display: none;' : '' ) . "'><a href='#'>" . $row->Title . "</a></li>";
            $counter++;
        }

    }
echo '</ul>';

接下来是你的 javascript，我假设 jQuery 没问题，因为你正在使用 Wordpress？我还将假设“加载更多”按钮具有“load_more”类。

(function($){
    $('body').on('click','.load_more',function(e){
        e.preventDefault();
        $('.paging-example li:hidden:lt(5)').slideDown();
    });
})(jQuery);

我做了一个幻灯片，因为我喜欢某种动画，您可以选择逐项执行它们，或者使用 .show() 一次性显示它们。

我使用了 $('body').on() 方法，以防万一动态添加加载更多按钮或其他内容。

所以解释一下，在 php 中我只是添加了 display: none 对于第五个之后的所有元素。

然后jquery简单地选择前五个不可见元素并显示它们。

您也可以执行 for 循环并以这种方式显示前五个元素，但我采用了我能想到的最简单的方法。

如果您需要包含 jquery，您可以添加:

到你的文件，但它是WordPress所以我建议使用wp_enqueue_script，类似 wp_enqueue_script('jquery');在适当的钩子(Hook)中。

我希望这有帮助，如果你不想使用 jQuery，我也可以给你一个原始的 javascript 方法，它只是有点长。

我的完整测试(在 WordPress 之外，页面上没有任何其他内容)如下所示，以确保我没有给您提供损坏的代码:

<?php
echo '<ul class="paging-example">';
for( $x = 0; $x < 100; $x++ )
{
    echo '<li style="' . ( $x >= 5 ? 'display: none;' : '' ) . '">stuff</li>';
}
echo '</ul>';
?>
<button class="load_more">Load More</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript">
    (function($){
        $('body').on('click','.load_more',function(e){
            e.preventDefault();
            $('.paging-example li:hidden:lt(5)').slideDown();
        });
    })(jQuery);
</script>