时间戳

首页 > 解决方案 > 为什么我的加载更多按钮无论我做什么都不起作用？

javascript - 为什么我的加载更多按钮无论我做什么都不起作用？

问题描述

我整天都在为此苦苦挣扎，我就是无法让它工作，因为我不知道是什么原因。怀疑是因为我在同一页面上有另一个部分，它工作得很好。

我有一个表单，当该表单被提交时，我会在 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和变量增加了 div的$increase数量（因为我有多个提要可以让你评论它）。

任何帮助都意义重大，因为我真的很沮丧。

标签： javascriptphpjqueryhtml

解决方案

几点建议：

  1. 除非您先做，否则通常.show()不会做任何事情.hide()，反之亦然。您可以将它们链接起来，例如$(el).hide().show()......它可能是这样的。
  2. $('selector')否则，通过将调用分配给变量然后执行 a来确保选择器正常工作，console.log(thatVar.length)以确保它们中的每一个都获得了您期望的结果数量。
  3. 最后，您可能会在元素在 DOM 中准备好之前尝试附加单击侦听器。最佳实践始终是在 DOM 就绪事件期间内联或（在您的情况下）附加侦听器：
$(document).ready(function() {
  // all your JQuery code shown above
});

推荐阅读