隐藏"write reply"每条批注下的文本框

Question

我正在做我的学校项目，它是gallery，实际上是flickr和unsplash的克隆。现在我正在开发评论系统，综合考虑，它运行得很好，但我也想在这些评论下添加回复，每个评论下都有textfields似乎很笨拙，所以我为它写了一个小的jQuery脚本：

这是这部分代码的测试文件，因为如果发生什么事情，我不想破坏主项目中的一些东西。PHP/HTML/

<?php 
require_once 'header.php';
if(isset($_POST['submit-comment']))
{
require_once 'includes/dbh.inc.php';
$userUid = "Bob";
$comment = $_POST['comment-input'];
$pageId = 24;
$parentId= -1;
$date = date("Y-m-d H:m:s");
$sql = "INSERT INTO comments(commentsPageId, commentsParentsId, commentsUseruid, commentsContent, commentsDate) VALUES (?,?,?,?,?);";
$stmt = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmt, $sql))
{
echo "OPPSIE!";
}
else
{
mysqli_stmt_bind_param($stmt, "iissi", $pageId, $parentId, $userUid, $comment, $date);
mysqli_stmt_execute($stmt);
}
mysqli_stmt_close($stmt);
}

$sqlSec = "SELECT commentsId, commentsUseruid, commentsContent, commentsDate FROM comments WHERE commentsPageId=24;";
$stmtSec = mysqli_stmt_init($conn);
if(!mysqli_stmt_prepare($stmtSec, $sqlSec))
{
echo "OPPSIE!";
}
else
{
mysqli_stmt_execute($stmtSec);
$result = mysqli_stmt_get_result($stmtSec);
echo '
<div class="comments_container">
<div class="comment-post">
<form action="" method="post">
<textarea name="comment-input" cols="100" rows="4" style="resize: none;" placeholder="Write your comment..."></textarea>
<button type="submit" name="submit-comment">Post comment</button>
</form>
</div>
<div class="comments">
';
while($row = mysqli_fetch_assoc($result))
{
$commentId = $row["commentsId"];
echo '
<div class="comment_'.$commentId.'"?
<div class="header">
<p class="name" style="color: black;">'.$row["commentsUseruid"].'</p>
<span class="date">'.$row["commentsDate"].'</span>
</div>
<p class="content" style="color: black;">'.$row["commentsContent"].'</p>  
<div class="reply_'.$commentId.'">
<form action="" method="post">
<textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
<button type="submit" name="submit-comment">Post comment</button>
</form>
</div>
<button class="replybtn_'.$commentId.'">Reply</button>
';
}
echo '</div>';
echo '</div>';
}
?>

jQuery

var id= '<?php echo $commentId; ?>';
var reply = ".reply_";
var selectorReply = reply.concat(id);
var replybtn = ".replybtn_";
var selectorBtn = replybtn.concat(id);
$(selectorBtn).click(function(){
$(selectorReply).toggle()
});

这有点奏效，但while($row = mysqli_fetch_assoc($result))只是在所有id中旋转，并在最后一个id处停止，所以所有回复按钮都只在最后一条评论上起作用。问题是，我如何将此脚本应用于所有评论，而不是仅应用于最后一个，以便回复按钮显示合适的textfields？

Answer 1

您可以像$("button[class*=replybtn_]").click(function() {这样编写事件处理程序，而不是为所有按钮单独编写jquery代码，因此当任何按钮具有类(即：replybtn和该词之后的任何内容(时，都会调用此事件。由于您也使用_来附加id，因此您可以使用split("_")[1]，这将在_之后为您提供值，然后使用它，您可以toggle您的回复分区。

演示代码 :

$("button[class*=replybtn_]").click(function() {
console.log($(this).attr("class").split("_")[1])
var ids = $(this).attr("class").split("_")[1];
$(".reply_" + ids).toggle()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comments_container">
<div class="comments">
<div class="comment_123">
<div class="header">
<p class="name" style="color: black;">123</p>
<span class="date">12/10/2002</span>
</div>
<p class="content" style="color: black;">All Goood..</p>
<div class="reply_123">
<form action="" method="post">
<textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
<button type="submit" name="submit-comment">Post comment</button>
</form>
</div>
<button class="replybtn_123">Reply</button>
</div>
----------------------------------------------
<div class="comment_231">
<div class="header">
<p class="name" style="color: black;">231</p>
<span class="date">12/10/2001</span>
</div>
<p class="content" style="color: black;">All Goood or not..</p>
<div class="reply_231">
<form action="" method="post">
<textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
<button type="submit" name="submit-comment">Post comment</button>
</form>
</div>
<button class="replybtn_231">Reply</button>
</div>
---------------------------------------
<div class="comment_456">
<div class="header">
<p class="name" style="color: black;">456</p>
<span class="date">12/10/1992</span>
</div>
<p class="content" style="color: black;">All Aweomese Goood..</p>
<div class="reply_456">
<form action="" method="post">
<textarea id="reply" name="comment-input" cols="80" rows="2" style="resize: none;" placeholder="Write your comment..."></textarea>
<button type="submit" name="submit-comment">Post comment</button>
</form>
</div>
<button class="replybtn_456">Reply</button>
</div>
</div>