时间戳

首页 > 解决方案 > 如何切换第一级评论的回复？

php - 如何切换第一级评论的回复？

问题描述

我的网站上有一个带有回复的嵌套评论系统，但评论和回复变得越来越长。

我想在页面加载时切换/隐藏回复，我将 id 添加到子评论容器中，并尝试使用 ajax 隐藏/切换但没有用。

我尝试了什么，添加了一个评论按钮parent_id ="0"并尝试了切换和隐藏：

$('#buttonReplies').click(function(e){
  e.preventDefault();
  $(this).next("#child").fadeToggle();  // $("#child").fadeToggle(); and $("#child").hide();
});

当然没有工作。

我的list-comments.php：

$post_id = intval($_POST["comment_post_id"]);
$parent = intval('0');
$active = 'Y';

$sth = $pdo->prepare(
    "SELECT * FROM comments
        JOIN profiles ON comments.com_uid = profiles.ik_uid
        WHERE comments.comment_post_id = ? 
        AND comments.comment_parent_id = ? 
        AND comments.active = ? ORDER BY comment_id DESC
    ");
$sth->execute([$post_id, $parent, $active]);

$output = '';
while($row = $sth->fetch()){
    if($row['ik_img'] !== ''){
        $image = explode('.',$row['ik_img']);
        $ik_img = $image[0].".webp";
        $ik = $row['ik_img'];
    }else{
        $ik_img = 'avatar.jpg';
        $ik = 'avatar.jpg';
    }
    $output .= '
        <div class="form-group border-bottom">
            <div class="row">
                <div class="col-12"><b>'.htmlspecialchars(ucfirst($row["comment_sender_name"])).'</b> dedi ki!</div>
                <div class="row">
                    <div class="col-2 stimg">
                            <picture>
                                <source type="image/webp" srcset="uploads/small/'.$ik_img.'">
                                <img src="uploads/small/'.$ik.'" alt="'.htmlspecialchars($row['comment_sender_name']).'" class="img-fluid"></div>
                            </picture>
                    <div class="col-10 sttext">'.htmlspecialchars($row['comment']).'</div>
                </div>
                <div class="col-12 sttime"><i class="date">'.htmlspecialchars($row["comment_date"]).'</i>
                    <button type="button" class="btn btn-primary btn-xs reply" id="'.intval($row["comment_id"]).'">Reply <i class="fas fa-share"></i></button>
                </div>
            </div>
        </div>
    ';
    $output .= get_comments($pdo, intval($row["comment_id"]), intval($row["comment_post_id"]));
}

echo $output;

function get_comments($pdo, $parent_id = 0,$post_id, $active = 'Y', $marginleft = 0){
    $stmt = $pdo->prepare(
    "SELECT * FROM comments
        JOIN profiles ON comments.com_uid = profiles.ik_uid
        WHERE comments.comment_post_id = ? 
        AND comments.comment_parent_id = ? 
        AND comments.active = ? ORDER BY comment_id DESC
    ");
    $stmt->execute([$post_id, $parent_id, $active]);
    $count = $stmt->rowCount();
    if($parent_id == 0){
        $marginleft = 0;
        $adclass = "";
    }else{
        $marginleft = $marginleft + 15;
        $adclass = "child";
    }
    $output = '';
    if($count > 0){
        while($row = $stmt->fetch()){
            if($row['ik_img'] !== ''){
                $image = explode('.',$row['ik_img']);
                $ik_img = $image[0].".webp";
                $ik = $row['ik_img'];
            }else{
                $ik_img = 'avatar.jpg';
                $ik = 'avatar.jpg';
            }
            $output .= '
                <div id="'.$adclass.'" class="form-group border-bottom" style="padding-left:'.$marginleft.'px;">
                    <div class="row">
                        <div class="col-12"><b class="hide">'.htmlspecialchars(ucfirst($row["comment_sender_name"])).'</b> dedi ki!</div>
                        <div class="row">
                            <div class="col-2 stimg">
                                    <picture>
                                        <source srcset="uploads/small/'.$ik_img.'" type="image/webp">
                                        <img src="uploads/small/'.$ik.'" alt="'.htmlspecialchars($row['comment_sender_name']).'" class="img-fluid"></div>
                                    </picture>
                            <div class="col-10 sttext">'.htmlspecialchars($row['comment']).'</div>
                        </div>
                        <div class="col-12 sttime"><i class="date">'.htmlspecialchars($row["comment_date"]).'</i>
                            <button type="button" class="btn btn-primary btn-xs reply" id="'.intval($row["comment_id"]).'">Reply <i class="fas fa-share"></i></button>
                        </div>
                    </div>
                </div>
            ';
            $output .= get_comments($pdo, intval($row["comment_id"]), $marginleft);
        }
    }
    return $output;
}

我在 post-detail.php 中的 ajax：

$(document).ready(function(){
    $('#comment_form').submit(function(event){
        event.preventDefault();
        var form_data = $(this).serialize();
        $.ajax({
            url:"modules/add_comment.php",
            method:"POST",
            data:form_data,
            dataType:"JSON",
            success:function(data)
            {
                if(data.error != '')
                {
                    $('#comment_form')[0].reset();
                    $('#comment_message').html(data.error);
                    $('#comment_id').val('0');
                    load_comment();
                }
            }
        })
    });

    load_comment();

    function load_comment(){
        var comment_post_id =$("#comment_post_id").val();
        $("#display_comment").load("modules/list_comment.php",{
            comment_post_id: comment_post_id,
        }); 
    }
    
    $(document).on('click', '.reply', function(){
        var comment_id = $(this).attr("id");
        $('#comment_id').val(comment_id);
        $('#comment_name').focus();
    }); 
});

数据库结构： 在此处输入图像描述

注意：我不只使用 jquery 和 css 引导程序。

标签： phpjqueryajax

解决方案

而不是id使用class选择器。然后，onclickshow replies切换所有 divs(child) 直到下一个parent类使用.nextUntil(".parent").slideToggle();

演示代码：

$(".parent").nextAll("div.child").slideUp() //hide all replies div
//on click of show replies
$(document).on('click', '.show_reply', function(e) {
  e.preventDefault();
  //check text change it
  $(this).text() == "show replies" ? $(this).text("hide replies") : $(this).text("show replies")
  //get closest parent div and then slide all child till next parent 
  $(this).closest(".parent").nextUntil(".parent").slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6">
  <div class="col-12">
    <h3 class="mgbt-xs-20 mrgt"><img alt="Yorumlar" src="uploads/images/icons/yes.png" width="32" height="32"> Total Comments (5)
    </h3>
  </div>
  <div class="col-12">
    <div id="display_comment">
      <!--added class parent-->
      <div class="form-group border-bottom parent">
        <div class="row">
          <div class="col-12"><b>User Name</b> Said!</div>
          <div class="row">
            <div class="col-2 stimg">
              <picture>
                <source type="image/webp" srcset="uploads/small/EcGzDp4bniBe.webp">
                <img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
            </div>

            <div class="col-10 sttext">How hHow to paginate search result php pdo? How to paginate search result php pdo? How to paginate search result php pdo? How h How to paginate search result php pdo?&amp;amp;nbsp;How to paginate search r</div>
          </div>
          <div class="col-12 sttime"><i class="date">2021-01-01 06:04:20</i>
            <button type="button" class="btn btn-primary btn-xs reply" id="40">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button type="button" class="btn btn-primary btn-xs show_reply" id="40">show replies</button>
          </div>
        </div>
      </div>
      <div class="form-group border-bottom child" style="padding-left:15px;">
        <div class="row">
          <div class="col-12"><b class="hide">User Name</b> Said!</div>
          <div class="row">
            <div class="col-2 stimg">
              <picture>
                <source srcset="uploads/small/EcGzDp4bniBe.webp" type="image/webp">
                <img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
            </div>

            <div class="col-10 sttext">This is a test comment, just to see how everything goes.</div>
          </div>
          <div class="col-12 sttime"><i class="date">2021-01-01 06:06:36</i>
            <button type="button" class="btn btn-primary btn-xs reply" id="42">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
          </div>
        </div>
      </div>

      <div class="form-group border-bottom child" style="padding-left:15px;">
        <div class="row">
          <div class="col-12"><b class="hide">User Name</b> Said!</div>
          <div class="row">
            <div class="col-2 stimg">
              <picture>
                <source srcset="uploads/small/EcGzDp4bniBe.webp" type="image/webp">
                <img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
            </div>

            <div class="col-10 sttext">Load more data from database using jquery Ajax php mysql</div>
          </div>
          <div class="col-12 sttime"><i class="date">2021-01-01 06:05:37</i>
            <button type="button" class="btn btn-primary btn-xs reply" id="41">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
          </div>
        </div>
      </div>

      <div class="form-group border-bottom parent">
        <div class="row">
          <div class="col-12"><b>User Name</b> Said!</div>
          <div class="row">
            <div class="col-2 stimg">
              <picture>
                <source type="image/webp" srcset="uploads/small/EcGzDp4bniBe.webp">
                <img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
            </div>

            <div class="col-10 sttext">How to paginate search result php pdo? How h How to paginate search result php pdo?&amp;amp;amp;amp;nbsp;How to paginate search result php pdo? How to paginate search result php pdo? How to paginate searc</div>
          </div>
          <div class="col-12 sttime"><i class="date">2021-01-01 05:59:09</i>
            <button type="button" class="btn btn-primary btn-xs reply" id="38">Reply <i class="fas fa-share" aria-hidden="true"></i></button><button type="button" class="btn btn-primary btn-xs show_reply" id="38">show replies</button>
          </div>
        </div>
      </div>
      <div class="form-group border-bottom child" style="padding-left:15px;">
        <div class="row">
          <div class="col-12"><b class="hide">User Name</b> Said!</div>
          <div class="row">
            <div class="col-2 stimg">
              <picture>
                <source srcset="uploads/small/EcGzDp4bniBe.webp" type="image/webp">
                <img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
            </div>

            <div class="col-10 sttext">This is a test comment, just to see how everything goes.</div>
          </div>
          <div class="col-12 sttime"><i class="date">2021-01-01 06:06:36</i>
            <button type="button" class="btn btn-primary btn-xs reply" id="42">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
          </div>
        </div>
      </div>
      <div class="form-group border-bottom parent">
        <div class="row">
          <div class="col-12"><b>User Name</b> Said!</div>
          <div class="row">
            <div class="col-2 stimg">
              <picture>
                <source type="image/webp" srcset="uploads/small/EcGzDp4bniBe.webp">
                <img src="https://www.kariyer.net/ik-blog/wp-content/uploads/2016/04/hr234222.jpg" alt="User Name" class="img-fluid"></picture>
            </div>

            <div class="col-10 sttext">How to paginate search result php pdo?</div>
          </div>
          <div class="col-12 sttime"><i class="date">2021-01-01 05:58:21</i>
            <button type="button" class="btn btn-primary btn-xs reply" id="37">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读