Javascript 为什么我的加载更多按钮赢了'；我做什么都不工作？

我一整天都在努力解决这个问题，我就是不知道是什么原因让它工作不起来。怀疑是因为我在同一页上有另一个部分，它工作得很好

我有一个表单，当表单被提交时，我会在下面显示结果，而不会在AJAX的帮助下刷新。现在在底部我有一个

Load More

按钮，它应该计算所有输出的结果，并将它们限制为3。因此，当单击“加载更多”按钮时，它将显示3个以上的结果，以此类推

我的PHP+HTML:

<?php 
$comments = mysqli_query($conn, "SELECT * FROM comments WHERE feed_id='$feed_token' ORDER by posted_at DESC");
?> 
<div class="storelisting<?php echo $post_inc2; ?>" id="storelisting<?php echo $post_inc2; ?>">
<?php
while($comments_row = mysqli_fetch_array($comments)) {             
  $comment = $comments_row['comment'];
  $comments_posted_at = $comments_row['posted_at'];
  $user_token = $comments_row['user_id'];

  $user_firstname = mysqli_query($conn, "SELECT firstname FROM users WHERE token='$user_token'");
  $user_username = mysqli_query($conn, "SELECT username FROM users WHERE token='$user_token'");
  $user_logo = mysqli_query($conn, "SELECT logo FROM users WHERE token='$user_token'");
  $comment_firstname = mysqli_fetch_row($user_firstname);
  $comment_username = mysqli_fetch_row($user_username);
  $comment_logo = mysqli_fetch_row($user_logo);
?>

<div class="comments">
  <div class="main">
    <figure class="user mb-0 mr-3"><img class="post-img-img comment-img" src="assets/img/user_images/<?php if ($comment_logo[0] == '') { echo 'user-top.png'; }  else { echo $comment_logo[0]; } ?>"></figure>
    <div>
      <h5 class="modal-title comments-modal-title" id="exampleModalLongTitle"><?php echo $comment_firstname[0]; ?><span class="bullet"> &sdot; </span><span class="comments-subtitles">@<?php echo $comment_username[0]; ?></span><span class="bullet"> &sdot; </span><span class="comments-subtitles"><?php echo timeago($comments_posted_at); ?></span></h5>
      <div class="modalUsername get-space">Replaying to <span class="reply-to">@<?php echo $username[0]; ?></span></div>
      <p class="commentMsg"><?php echo $comment; ?></p>
    </div>
  </div>
</div>

<?php } ?>

</div>

<div id="loadMoreComments<?php echo $post_inc2; ?>">Load More</div> 

   $('.storelisting<?php echo $increase; ?> .comments').css('display','none');
$(document).ready(function () {
    size_li = $(".storelisting<?php echo $increase; ?> .comments").length;
    x=3;
    $('.storelisting<?php echo $increase; ?> .comments:lt('+x+')').show();
    if (size_li <= x) {
    $('#loadMoreComments<?php echo $increase; ?>').remove();
    }
    $('#loadMoreComments<?php echo $increase; ?>').click(function () {
        x= (x+3 <= size_li) ? x+3 : size_li;

        setTimeout(function(){
        $('.storelisting<?php echo $increase; ?> .comments:lt('+x+')').fadeIn("slow");
      }, 1000);

        if(x == size_li){
        setTimeout(function(){
          $('#loadMoreComments<?php echo $increase; ?>').hide();
        }, 1000);
        }
    });
});

一些提示：

通常，除非先执行
.hide（）
，否则
.show（）
不会执行任何操作，反之亦然。您可以链接它们，例如
$（el）.hide（）.show（）
。。。可能是这个
否则，通过将
$（'selector'）
调用分配给一个变量，然后执行
console.log（thatVar.length）
来确保选择器工作正常，以确保每个选择器都获得了预期的结果数
最后，在DOM中的元素准备就绪之前，您可能正在尝试附加click侦听器。最佳实践始终是在DOM就绪事件期间内联或（在您的情况下）附加侦听器：
jQuery无法识别包含php变量的选择器……我认为情况并非如此。使用这些变量，我只是简单地添加了数字增量，我没有显示整个代码，但在load more脚本中，我有一个while循环，它多次显示此代码（因此它与表单中的.comments数字匹配）@WebMarie-它们的工作方式与OP尝试的方式相同。如果
$increase=1
，则
$（“.storelisting.comments”）
将与
$（“.storelisting1.comments”）
相同，但不知道在选择器的字符串中可以这样做。Thanks@FreelancerHelp-我们需要知道用于
$post_inc2
和
$increase
的值。如果他们在某一点上不匹配，那可能是你的问题
$(document).ready(function() {
  // all your JQuery code shown above
});