jquery ajax加载多个实例的更多按钮

jquery ajax加载多个实例的更多按钮,jquery,ajax,Jquery,Ajax,如何在同一页上多次使用此代码 即时消息显示将使用ajax捕获的数据,每个数据都有自己的带有“显示更多评论”按钮的评论框 如果我按下“显示更多评论”按钮,每个评论框都会更新,而不是单击的那个 我想我需要修改Jquery/ajax代码: $( document ).on( 'click', '.loadmore', function () { $(this).text('Loading...'); var ele = $(this).parent('li'); $.a

如何在同一页上多次使用此代码

即时消息显示将使用ajax捕获的数据,每个数据都有自己的带有“显示更多评论”按钮的评论框

如果我按下“显示更多评论”按钮,每个评论框都会更新,而不是单击的那个

我想我需要修改Jquery/ajax代码:

$( document ).on( 'click', '.loadmore', function () {
     $(this).text('Loading...');
     var ele = $(this).parent('li');
      $.ajax({
        url: 'loadmore.php',
        type: 'POST',
        data: {
          page:$(this).data('page'),
        },
        success: function(response){
          if(response){
            ele.hide();
            $(".news_list").append(response);
          }
        }
      });
});
HTML/PHP:

<div id="container">
<ul class="news_list">
<?php
$query=mysql_query("SELECT * FROM `comments` ORDER BY `id` ASC LIMIT 0 , $resultsPerPage");
while($data=mysql_fetch_array($query)){
$title=$data['name'];
$content=$data['comment'];
echo "<li><h3>$title</h3><p>$content<p></li>";
}
?>
<li class="loadbutton"><button class="loadmore" data-page="2">Load More</button></li>
</ul>
</div>

  • 加载更多
loadmore.php:

    <?php include('config.php'); ?>
    <?php
        if(isset($_POST['page'])):
        $paged=$_POST['page'];
        $sql="SELECT * FROM `comments`ORDER BY `id` ASC";
        if($paged>0){
               $page_limit=$resultsPerPage*($paged-1);
               $pagination_sql=" LIMIT  $page_limit, $resultsPerPage";
               }
        else{
        $pagination_sql=" LIMIT 0 , $resultsPerPage";
        }

        $result=mysql_query($sql.$pagination_sql);

        $num_rows = mysql_num_rows($result);
        if($num_rows>0){
        while($data=mysql_fetch_array($result)){
        $title=$data['name'];
        $content=$data['comment'];
        echo "<li><h3>$title</h3><p>$content<p></li>";
        }
        }
        if($num_rows == $resultsPerPage){?>
        <li class="loadbutton"><button class="loadmore" data-page="<?php echo  $paged+1 ;?>">Load More</button></li>
     <?php 
      }else{
        echo

 "<li class='loadbutton'><h3>No More Feeds</h3></li>";
 }
  endif;
   ?>


  • 对于每个实例,更改按钮的类别以及显示内容的div。例如,loadmore按钮应该具有以下类

    <li class="loadbutton1"><button class="loadmore1" data-page="2">Load More</button></li>
    
    <li class="loadbutton2"><button class="loadmore2" data-page="2">Load More</button></li>
    
    <li class="loadbutton3"><button class="loadmore3" data-page="2">Load More</button></li>
    
  • 加载更多
  • 加载更多
  • 加载更多

  • 对于每个实例,更改按钮的类别和显示内容的div。例如,loadmore按钮应该具有以下类

    <li class="loadbutton1"><button class="loadmore1" data-page="2">Load More</button></li>
    
    <li class="loadbutton2"><button class="loadmore2" data-page="2">Load More</button></li>
    
    <li class="loadbutton3"><button class="loadmore3" data-page="2">Load More</button></li>
    
  • 加载更多
  • 加载更多
  • 加载更多

  • 共享您的html示例共享您的html示例