javascript - 我怎样才能让这个按钮在向下滚动时被点击以无限滚动？

Question

这里的按钮从数据库加载数据。工作良好。

<li class="getmore" id="'.$post_id.'"><a>Load More  Posts</a></li>

如何让这个按钮在向下滚动到页面底部时自动被点击。简直就是无限卷轴。

我应该使用窗口滚动功能吗？如果是，那么如何在这段代码中做到这一点。

我尝试将 ajax 代码粘贴到此函数中，但没有用。

编辑:1. 当我将 Ajax 放入滚动函数时，它在 getmore.php 中显示 mysql 错误。2. 如果我将带有点击功能的按钮类放在滚动功能中，那么它会触发得太快，以至于多次加载相同的帖子。

$(document).scroll(function(){
  if ($(window).scrollTop() + $(window).height() >= $(document).height()) {

  }
});


$('body').on('click','.getmore',function(){

  var lastelement = $(this ).attr('id');
  			 
  $.ajax({
    type       : 'GET',
    url        : 'getmore.php',
    data       : 'lastelement='+lastelement,
    beforesend :  function(){

      $('.getmore').html('loading....');

    }, 
    success: function(data){
      $('.getmore').remove();
      $('#recs') .append(data) ; 
    }
  });

});

<?php

      $lastelement = $_REQUEST['lastelement' ];
      include("connect2.php");

      if ($lastelement!=''){

        $query   = "SELECT * FROM `posts` "

                 . "WHERE (id < " . $lastelement . " AND "
                 .         "post_keywords like '%home%') " 

                 . "ORDER BY `posts`.`id` DESC  "
                 . "LIMIT 10";

        $records = mysql_query($query);


        if (mysql_num_rows($records)) {
     
          while($record = mysql_fetch_array($records)){

            $cookie_name = 'tcVotingSystem'.$record['id'];
    		$post_title = $record['post_title'];
            $post_id = $record['id'];
            $post_date = $record['post_date'];
            $post_author = $record['post_author'];
            $post_image = $record['post_image'];

            $post_image2 = $record['post_image2'];
            $post_keywords = $record['post_keywords'];
            $post_content = substr($record['post_content'],0,100);
?>

<div>
  //posts goes here
</div>

Answer 1

您要做的是在滚动到达特定点后触发相同的 Ajax 请求您按下按钮。因此，与其在滚动时插入点击事件函数，不如触发您的 Ajax 事件

例子:

$(document).scroll(function(){
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {

    $.ajax({
         type: 'GET',
         url: 'getmore.php',
         data:'lastelement='+lastelement,
            beforesend: function(){
                $('.getmore').html('loading....');
            },       
            success: function(data){
                $('.getmore').remove();
                $('#recs') .append(data) ; 
            }
    });
    }
});

以上只是一个例子。顺便说一句，我建议您为延迟加载 ajax 调用创建一个函数，因为您可能需要多次使用它，即单击和滚动时。

希望对你有帮助