Question

我整天都在为此苦苦挣扎，我只是因为不知道是什么原因而无法正常工作。令人怀疑的是，因为我在同一页面上还有另一部分，所以效果很好。

我有一个表单，当该表单提交时，我在AJAX的帮助下显示了以下结果，而没有刷新。现在在底部，我有一个Load More按钮，该按钮应该计算所有输出结果并将其限制为3。因此，当单击Load More按钮时，它将显示另外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>

jQuery（已更新）：

   $('.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);
        }
    });
});

因此，PHP代码从选定的列/表中获取所有行，效果很好，使用AJAX，我在下面显示了提交的注释，效果也很好。但是单击“加载更多”按钮并不会执行任何操作。该脚本仅显示三个div并隐藏其他div，但是单击该脚本不会响应。 $post_inc2和$increase变量会增加div上的数字（因为我有多个供稿可让您对其进行评论）。

任何帮助都会有很多意义，因为我真的很沮丧。

Answer 1

一些指针：

除非您先进行.show()，否则.hide()通常不会做任何事情，反之亦然。您可以将它们链接起来，例如$(el).hide().show() ...可能就是这个。
否则，通过将$('selector')调用分配给变量，然后执行console.log(thatVar.length)来确保选择器正常工作，以确保每个选择器都具有您期望的结果数量。
最后，您可能尝试在DOM中的元素准备就绪之前附加您的点击侦听器。最佳做法始终是在DOM就绪事件中，以内联或（在您的情况下）附加侦听器：

$(document).ready(function() {
  // all your JQuery code shown above
});

为什么我的“加载更多”按钮无法执行任何操作？

1 个答案: