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

从数据库获取信息

$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>';

}

$video\u id=$\u GET['id']；
$query=“从视频\u注释中选择*，其中视频\u id=：视频\u id”；
$stmt=$pdo->prepare（$query）；
$stmt->bindValue（':video\u id'，$video\u id）；
$stmt->execute（）；
而（$row=$stmt->fetch（PDO:：fetch\U ASSOC））{
$id=$row['id']；//每个注释的id
//显示/隐藏脚本
回显“函数replyToCommentFunction.”$id.（）{
var x=document.getElementById（“replyToComment.$id.”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}';
回复
//要显示的Div。。。
回声'；
回声‘你好，世界！’；
回声'；
}

---

我还以为我能用呢。但是现在，页面上只有一个“回复”按钮可用。最新的回复按钮刷新页面，这让我很困惑，因为没有脚本或操作存在，这些脚本或操作会告诉它提交表单或刷新页面。我将感谢任何帮助。谢谢。

能否尝试将type=“button”添加到刷新页面的按钮

既然你可以创建一个函数并让所有的按钮都可以使用，为什么还要创建很多函数呢

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

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

函数replyToCommentFunction（x）{
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}

编辑此按钮：

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

回复

如果页面上的所有DIV都具有相同的id值（实际上是不允许的），函数如何理解要扩展哪个DIV。是的，（this）会将单击的元素发送给函数。函数没有按id捕获元素，这就是我删除此行的原因。函数上的x已经是元素，因此不再需要“getElementById”。）好的，但还是有点困惑我从你那里得到了这个<代码>一个功能第a部分，

第b部分

，

第c部分

<代码>按钮a，

按钮b

，

按钮c

。信息从按钮a传递到唯一的功能。那么从函数到，哪个div？什么确切地告诉按钮哪个div应该扩展，因为不再需要id了。必须有一些东西来标识正在扩展的div，对吗？您可以在button onclick属性上这样做

，然后您可以通过ID在函数上获得带有变量x的div元素。

document.getElementById（“replyToComment”+x）

。啊，我明白了。非常感谢你。我一直认为循环脚本是不合适的。直到现在我才知道另一种方法。谢谢。这是一个很好的实践，不管它是否解决了op的问题