如何使用数据属性使单击的回复按钮仅显示一条评论的文本区域回复字段

Question

我已经被困了几个小时，用谷歌搜索但仍然无法解决它。我将不胜感激，请各位指导。 我在我正在开发的一个 php 项目中包含一个类似论坛的页面，用户可以在其中评论帖子，然后提供对单个 cmets 的回复。我的挑战在于代码的回复部分。我在 cmets 之后放置了一个回复按钮，点击后会淡出以显示一个文本区域，用户可以输入他们的回复。现在，当我单击回复按钮时，它会淡出没关系，但文本区域会出现在帖子上的所有 cmets 中。我尝试引入一个带有帖子 ID 值的数据属性（数据 ID），以将单击的回复按钮绑定到要显示的特定文本区域，但我似乎无法解决这个问题。任何帮助将不胜感激。 我的 PHP 代码在这里：

<?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/>';
            }
        }
?>

还有我的 jquery：

<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>

Answer 1

不需要使用data属性，你可以使用.closest()和.next()

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

注意：id="but_rep"，id="comment_reply" id 必须是唯一的 .. 所以只使用一个 id 一个元素 .. 使用 class= 获取更多元素

演示

$(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>