Question

我正在尝试开发评论和回复系统。

首先，我从数据库中获取所有注释，然后使用class="comment"将其显示在div中。我为每条评论设置了回复按钮。

现在我想要的是如果点击按钮应该出现一个回复表格。

目前回复表单div设置为display:"none"

<div class="row col-md-12"><!--reply system starts here -->                    
  <!--reply form goes here -->
</div>

以下是整个html

<?php foreach ($comment_res as $comments){ ?>
<div class="comment">
  <div class="col-md-12">
    <h5>
      <?php echo $comments['vname'] ?> <small><button class="replybtn" id="<?php echo $comments['comment_id'];  ?>">Reply</button></small></h5>
  </div>
  <div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="50"></div>
  <div class="col-md-6 text_indent">
    <?php echo $comments['comment'] ?>
  </div>

  <!--
                        <div class="comment col-xs-offset-1">
                            <div class="col-md-12"><h5>Pankaj</h5></div>
                            <div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="40"></div>
                            <div class="col-md-9 text_indent">kya hai be</div>
                        </div>-->
  <!--//-->
  <div class="row col-md-12">
    <!--reply system starts here-->
    <!--reply form goes here -->
  </div>
  <!--//-->
</div>
<?php } ?>

Answer 1

您需要做什么，如果您的回复表单是每个评论的个人

制作回复div 显示：无默认
点击按钮事件，您只需要回复表单显示：阻止

查看更新的代码，

 <?php foreach ($comment_res as $comments) { ?>
    <div class="comment">
        <div class="col-md-12"><h5><?php echo $comments['vname'] ?> <small><button class="replybtn" id="<?php echo $comments['comment_id']; ?>">Reply</button></small></h5></div>
        <div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="50"></div>
        <div class="col-md-6 text_indent"><?php echo $comments['comment'] ?></div>

        <!--
        <div class="comment col-xs-offset-1">
            <div class="col-md-12"><h5>Pankaj</h5></div>
            <div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="40"></div>
            <div class="col-md-9 text_indent">kya hai be</div>
        </div>-->
        <!--//-->
        <div class="row col-md-12 replyform-<?php echo $comments['comment_id']; ?>" style="display: none;"><!--reply system starts here-->
            <!--reply form goes here -->
        </div>
        <!--//-->
    </div>
<?php } ?>

<script>
    jQuery(document).on("click", ".replybtn", function () {
        var comment_id = jQuery(this).attr("id");
        jQuery(this).parents(".comment").find(".replyform-" + comment_id).css({display: "block"});
    });
</script>

Answer 2

$('.replybtn').click(function () {
 $('#reply_form').show()
});

#reply_form - 表单回复

Answer 3

您可以使用Jquery hide()和show()功能执行此操作。

$('.replybtn').click(function () {
  $('#comment_form').show()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="comment">
    <div class="col-md-12">
      <h5>
        <small>
          <button class="replybtn">Reply</button>
        </small>
      </h5>
    </div>
    <div class="col-md-3">
      <img src="admin/member_profile/commenter_icon.png" alt="photo" width="50">
    </div>
    <div class="col-md-6 text_indent"></div>
    <div class="row col-md-12" id="comment_form" style="display:none">
        <div class="form-group">
            <label for="form_lastname">Name *</label>
            <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
            <div class="help-block with-errors"></div>
        </div>
        <div class="form-group">
            <label for="form_email">Email *</label>
            <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
            <div class="help-block with-errors"></div>
        </div>
        <div class="form-group">
              <label for="form_message">Message *</label>
              <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
              <div class="help-block with-errors"></div>
          </div>
    </div>
</div>

Answer 4

<?php 
$comment_res['comment_res'] = array(
    'vname'=>'sggsgsgsg', 
    'comment_id'=>10, 
    'comment'=>'sgsdgsgdsgsg' 
    );

foreach ($comment_res as $comments){ ?>
                <div class="comment">
                    <div class="col-md-12"><h5><?php echo $comments['vname'] ?> <small><button class="replybtn" id="<?php echo $comments['comment_id'];  ?>" data-target="#commentQue_<?php echo $comments['comment_id'];?>">Reply</button></small></h5></div>
                    <div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="50"></div>
                    <div class="col-md-6 text_indent"><?php echo $comments['comment'] ?></div>


                    <div class="modal fade commentQueModal" id="commentQue_<?php echo $comments['comment_id']; ?>" tabindex="-1" role="dialog" aria-labelledby="commentQueLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                         <div class="suceess_container">
                                            <h4 class="suceess_msg" id="suceess_msg_comment"></h4>
                                            <h4 class="error_msg" id="error_msg_comment"></h4>
                                         </div>
                                    </div>


                                    <form class="commentQueform" id="commentQueform"></form>
                                        <div class="modal-body">
                                            <div class="form-group">

                                                <label>Comment</label>

                                                <input type="text" name="followup_comment" id="followup_comment" class="form-control">
                                                <div class="error_msg_int" id="error_msg_followup_comment"></div>
                                            </div>
                                            <input type="hidden" name="que_id" id="que_id" value="<?php echo $que_det['id']; ?>">
                                            <input type="hidden" name="follow_que_id" id="follow_que_id" value="<?php echo $followup_que_det['id']; ?>">
                                        </div>
                                        <div class="modal-footer">
                                            <button id="comment_que_<?php echo $followup_que_det['id']; ?>_<?php echo $que_det['id'] ?>" name="comment_que" value="Submit" class="btn btn-primary">Submit</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                </div>
<?php } ?>


NOW you have to hide this texbox and when any user hit button reply and with the help of ajax we can store it in to the database.

Answer 5

在你的循环中这么简单，在隐藏的表单部分，通过示例<form class="reply_form" ...>为表单设置一个类，然后你只需要设置一个jquery事件到按钮，所以它进入注释父div（ .parents([.selector])）然后使用其类（.find( selector )）和show()来搜索当前表单：

我尝试在以下代码段中重现生成的循环代码：

$('.replybtn').on("click", function() {
  $(this).parents(".comment").find(".reply_form").show();
});

.reply_form {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="comment">
    <div class="col-md-12">
      <h5>
        Commenter <small><button class="replybtn" id="<?php echo $comments['comment_id'];  ?>">Reply</button></small></h5>
    </div>
    <div class="col-md-3"><img src="http://icons.iconarchive.com/icons/graphicloads/flat-finance/256/person-icon.png" alt="photo" width="50"></div>
    <div class="col-md-6 text_indent">
      the comment
    </div>

    <!--
                        <div class="comment col-xs-offset-1">
                            <div class="col-md-12"><h5>Pankaj</h5></div>
                            <div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="40"></div>
                            <div class="col-md-9 text_indent">kya hai be</div>
                        </div>-->
    <!--//-->
    <div class="row col-md-12">
      <form action="#" class="reply_form">
        <div class="form-group">
          <label for="name">Name </label>
          <input id="name" type="text" name="name" class="form-control">
        </div>
        <div class="form-group">
          <label for="comment">Comment </label>
          <textarea id="comment" name="comment" class="form-control"></textarea>
        </div>
        <div>
          <button type="button" class="btn btn-primary ">Submit</button>
        </div>
      </form>
    </div>
    <!--//-->
  </div>
  <div class="comment">
    <div class="col-md-12">
      <h5>
        Commenter 2 <small><button class="replybtn" id="<?php echo $comments['comment_id'];  ?>">Reply</button></small></h5>
    </div>
    <div class="col-md-3"><img src="http://icons.iconarchive.com/icons/graphicloads/flat-finance/256/person-icon.png" alt="photo" width="50"></div>
    <div class="col-md-6 text_indent">
      the comment
    </div>

    <!--
                        <div class="comment col-xs-offset-1">
                            <div class="col-md-12"><h5>Pankaj</h5></div>
                            <div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="40"></div>
                            <div class="col-md-9 text_indent">kya hai be</div>
                        </div>-->
    <!--//-->
    <div class="row col-md-12">
      <form action="#" class="reply_form">
        <div class="form-group">
          <label for="name">Name </label>
          <input id="name" type="text" name="name" class="form-control">
        </div>
        <div class="form-group">
          <label for="comment">Comment </label>
          <textarea id="comment" name="comment" class="form-control"></textarea>
        </div>
        <div>
          <button type="button" class="btn btn-primary ">Submit</button>
        </div>
      </form>
    </div>
    <!--//-->
  </div>
  <div class="comment">
    <div class="col-md-12">
      <h5>
        Commenter  3 <small><button class="replybtn" id="<?php echo $comments['comment_id'];  ?>">Reply</button></small></h5>
    </div>
    <div class="col-md-3"><img src="http://icons.iconarchive.com/icons/graphicloads/flat-finance/256/person-icon.png" alt="photo" width="50"></div>
    <div class="col-md-6 text_indent">
      the comment
    </div>

    <!--
                        <div class="comment col-xs-offset-1">
                            <div class="col-md-12"><h5>Pankaj</h5></div>
                            <div class="col-md-3"><img src="admin/member_profile/commenter_icon.png" alt="photo" width="40"></div>
                            <div class="col-md-9 text_indent">kya hai be</div>
                        </div>-->
    <!--//-->
    <div class="row col-md-12">
      <form action="#" class="reply_form">
        <div class="form-group">
          <label for="name">Name </label>
          <input id="name" type="text" name="name" class="form-control">
        </div>
        <div class="form-group">
          <label for="comment">Comment </label>
          <textarea id="comment" name="comment" class="form-control"></textarea>
        </div>
        <div>
          <button type="button" class="btn btn-primary ">Submit</button>
        </div>
      </form>
    </div>
    <!--//-->
  </div>
</div>
<!-- /container -->

如何在指定的块下面显示元素

5 个答案: