如何在单个页面上放置许多显示/隐藏功能?

Question

从数据库中获取信息

$video_id = $_GET['id'];
$query = "SELECT * FROM video_comments WHERE video_id = :video_id";
$stmt = $pdo->prepare($query);
$stmt->bindValue(':video_id',$video_id);
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$id = $row['id']; // The id for each comment
// Show/Hide Script
echo '<script>function replyToCommentFunction'.$id.'() {
var x = document.getElementById("replyToComment'.$id.'");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}</script>';
<button name="replyToComment" class="videoCommentsReplyButton" onClick="replyToCommentFunction'.$id.'()">Reply</button>
// The Div to show...
echo '<div id="replyToComment'.$id291.'">';
echo 'Hello, World!';
echo '</div>';
}

我以为我有这个工作。但是现在，页面上只有一个"回复"按钮有效。最新的回复按钮刷新页面，这让我感到困惑，因为不存在脚本或操作，它会告诉它提交表单或刷新页面。我将不胜感激任何帮助。谢谢。

Answer 1

当您可以创建一个函数并使所有按钮都使用它时，为什么要创建很多函数？

在页面末尾添加以下代码：

<script type="text/javascript">
function replyToCommentFunction(x) {
if(x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>

将按钮编辑为此：

<button name="replyToComment" class="videoCommentsReplyButton" onClick="replyToCommentFunction(this);">Reply</button>

Answer 2

您可以尝试将 type="button" 添加到刷新页面的按钮吗？