duanfu4446
2017-06-01 17:50
浏览 33

如何单击回复按钮仅显示使用数据属性的一个注释的textarea回复字段

I've been stucked for hours on this, googled but still couldn't resolve it. I will appreciate some guidance please guys. I’m including a forum-like page on a php project I’m working on where users can comment on a post and then provision for replies to individual comments. My challenge is at the reply part of the code. I placed a reply button after the comments and when clicked fades out to show a textarea which users can type their replies. Now, when I click the reply button, it fades out which is ok, but the textarea appears for all the comments on the post. I tried introducing a data attribute(data-id) with a value of the post Id to bind the reply button clicked to the particular textarea to show but I can’t seems to wrap my head around this. Any help will be appreciated please. My Php code here:

<?php
require("includes/conn.php");
$stmt=$conn->prepare("SELECT post_id, user, topic, post, time FROM post_tb ORDER BY time DESC");
    $stmt->execute();
    $result = $stmt->get_result();
    $num_of_rows = $result->num_rows;
    if ($num_of_rows > 0){
        while ($row = $result->fetch_assoc()){
            $post_id = $row['post_id'];
            $user = $row['user'];
            $topic = $row['topic'];
            $post = $row['post'];
            $time = $row['time'];
            $time = date('M dS, Y g:i A', strtotime($time));
            echo '<div>
                    <div>
                        <h5><strong>'.$user.'</strong></h5><h6>'.$time.'</h6>
                        <h5><strong>'.ucfirst($topic).'</strong></h5>
                        <p data-id="'.$post_id.'">'.$post.'</p>
                    </div>      
                    <div>
                        <button type="button" class="btn btn-primary rep" id="but_rep" data-id="'.$post_id.'">Reply</button>
                    </div>
                    <form id="comment_reply" data-id="'.$post_id.'" method="post" action="">
                        <input type="hidden" class="hidden" value="'.$post_id.'" id="post_id">
                        <textarea class="form-control" rows="3" name="post_rep" id="post_rep"></textarea>
                        <button type="submit" class="btn btn-primary" id="post_rep_sub">Submit</button>
                    </form>
                <div/>';
            }
        }
?>

and my jquery here:

<script>
$(document).on('click', 'button#but_rep', function(e){
                e.preventDefault();
                var buttonId = $('form input#post_id').val();
                //$('button#but_rep[data-id="buttonId"]').fadeOut();
                //$('form#comment_reply[data-id="buttonId"]').fadeIn();
                $(this).fadeOut();
                $("form#post_comment_reply").fadeIn();
    });
</script>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douchuanhan8384 2017-06-01 17:55
    已采纳

    No need to use data attribute you can just use .closest() and .next()

    $(document).on('click' , '.rep' , function(){
       var closestDiv = $(this).closest('div'); // also you can use $(this).parent();
       closestDiv.fadeOut();
       closestDiv.next('form').show();
    });
    

    Note: id="but_rep" , id="comment_reply" Id must be unique .. so use one id for just one element ..use class= for more elements

    Demo

    $(document).ready(function(){
      $(document).on('click' , 'button.rep' , function(){
         var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
         //closestDiv.fadeOut();
         $('.comment_reply').not(closestDiv.next('.comment_reply')).hide();
         //$('.rep').closest('div').not(closestDiv).show()
         closestDiv.next('form.comment_reply').slideToggle(100);
      });
    });
    form.comment_reply{
      display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
        <button type="button" class="btn btn-primary rep" data-id="">Reply</button>
    </div>
    <form class="comment_reply" data-id="" method="post" action="">
        <input type="hidden" class="hidden" value="" class="post_id">
        <textarea class="form-control" rows="3" name="post_rep" class="post_rep"></textarea>
        <button type="submit" class="btn btn-primary" class="post_rep_sub">Submit</button>
    </form>
    
    <div>
        <button type="button" class="btn btn-primary rep" data-id="">Reply</button>
    </div>
    <form class="comment_reply" data-id="" method="post" action="">
        <input type="hidden" class="hidden" value="" class="post_id">
        <textarea class="form-control" rows="3" name="post_rep" class="post_rep"></textarea>
        <button type="submit" class="btn btn-primary" class="post_rep_sub">Submit</button>
    </form>
    
    <div>
        <button type="button" class="btn btn-primary rep" data-id="">Reply</button>
    </div>
    <form class="comment_reply" data-id="" method="post" action="">
        <input type="hidden" class="hidden" value="" class="post_id">
        <textarea class="form-control" rows="3" name="post_rep" class="post_rep"></textarea>
        <button type="submit" class="btn btn-primary" class="post_rep_sub">Submit</button>
    </form>

    </div>
    
    点赞 评论

相关推荐 更多相似问题