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>';
}




?>

我猜这个问题与无限滚动脚本有关，实际上并不包括read more插件。我根本不满jquery所以我只是下载并修改了两个脚本。

有什么想法吗？

Answer 1

好。您应该做的是在事件触发上运行readmore()：

将此ALSO放在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
    });

    });

Jquery在无限滚动脚本中读取更多按钮

1 个答案: