javascript - Jquery 无限滚动脚本中的“阅读更多”按钮

Question

我正在制作一个包含用户生成内容的网站。内容基于文本，最受欢迎的帖子将显示在首页上。由于帖子可能很长，我想添加一个阅读更多按钮。阅读更多按钮在加载的前 10 个帖子上工作正常，但在使用我的无限滚动脚本加载的帖子上不起作用。我用于阅读更多内容的 jquery 插件是 http://jedfoster.com/Readmore.js/ .

加载页面前 10 篇文章的代码:

<?php
if($sql1){
    while($row = mysqli_fetch_array($sql1)){
        echo '<div id="postlist">
        <div style="width:400px; font-size:24px;">' . $row['title'] . '</div>
        <article class="slide">' . nl2br($row['post']) . '</article>
        <span style="float:right; margin-right: 10px;">+ ' . $row['totalupvotes'] . ' | - ' . $row['totaldownvotes'] . '</span>
        <br />
        by <a style="font-size:18px;" href="profile.php?id=' . $row['submittedby'] . '">' . $row['submitteduser'] . '</a>
         at <span style="font-size:12px;">' . $row['added'] . '</span><span style="float:right; margin-right: 10px;">' . $row['totalcomments'] . ' comments</span>
         </div>';
    }
}
?>

无限滚动和阅读更多插件的代码:

<script src="js/readmore.js"></script>
<script src="js/readmore.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#loader").hide();
    var load = 0;
    var nbr = "<?php echo $nbr; ?>";
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height())
        {
            $("#loader").show();
            load++;
            if(load * 10 > nbr)
            {
                $("#messages").text("No more posts");
                $("#loader").hide();
            }
            else{
                $.post("php/newquery.php",{load:load},function(data){

                $("#contentwrapper").append(data);
                $("#loader").hide();
            });
            }
        }
    });
    $('article').readmore({
      maxHeight: 75,
      speed: 300
    });
});
</script>

这是获取文章标签上的“阅读更多”按钮所需的唯一代码:

$('article').readmore({
          maxHeight: 75,
          speed: 300
        });

这是用于加载更多帖子的 newquery.php 脚本:

<?php
require_once("connect.php");
require_once("config.php");
$load = htmlentities(strip_tags($_POST['load'])) * 10;

$query = mysqli_query($connect,"SELECT * FROM posts WHERE totalupvotes < $trendmin AND deleted=0 ORDER BY added DESC LIMIT " . $load . ",10");

while($row = mysqli_fetch_array($query)){
    echo '<div id="postlist">
        <div style="width:400px; font-size:24px;">' . $row['title'] . '</div>
        <article class="slide">' . nl2br($row['post']) . '</article>
        <span style="float:right; margin-right: 10px;">+ ' . $row['totalupvotes'] . ' | - ' . $row['totaldownvotes'] . '</span>
        <br />
        by <a style="font-size:18px;" href="profile.php?id=' . $row['submittedby'] . '">' . $row['submitteduser'] . '</a>
         at <span style="font-size:12px;">' . $row['added'] . '</span><span style="float:right; margin-right: 10px;">' . $row['totalcomments'] . ' comments</span>
         </div>';
}




?>

我猜测问题与无限滚动脚本有关，但实际上并未包含阅读更多插件。我根本不擅长 jquery，所以我只是下载并修改了这两个脚本。

有什么想法吗？

Answer 1

嗯。您应该做的可能是在事件触发时运行 readmore():

也将其放入 window.scroll() 事件中:

$(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height())
        {
            $("#loader").show();
            load++;
            if(load * 10 > nbr)
            {
                $("#messages").text("No more posts");
                $("#loader").hide();
            }
            else{
                $.post("php/newquery.php",{load:load},function(data){

                $("#contentwrapper").append(data);
                $("#loader").hide();
            });
            }
        }

    // HERE we also call readmore(), in addition to the first call on page load.
    $('article').readmore({
      maxHeight: 75,
      speed: 300
    });

    });