Javascript JS显示无PHP foreach仅使用第一个元素

我从一个数据库中带来的文章带有

orderbyrand（）

，带有PHP foreach循环：

<?php foreach($posts as $post): ?>
    <div class="post" id="post">
        <article>
            <div class="post-head">
                <a href="<?php echo ROUTE; ?>/profile.php/<?php echo $post['user_id']; ?>">
                    <img class="post-pfp" src="<?php echo ROUTE; ?>/users_pics/<?php echo ($post['profile_pic']); ?>">
                </a>

                <h1>
                    <a class="links-3" href="<?php echo ROUTE; ?>/profile.php?user=<?php echo $post['user_id']; ?>"><?php echo $post['post_by']; ?></a>
                </h1>
                
                <p class="post-date"><?php echo get_date($post['date']); ?></p>

                <div class="x_hover" onclick="hide_post()">
                    <img src="<?php echo ROUTE; ?>/icons/cross.svg">
                </div>

                <hr id="post-hr">

                <br>

                <a href="<?php echo ROUTE; ?>/post.php?p=<?php echo $post['ID']; ?>">
                    <p class="post-content"><?php echo $post['content']; ?></p>
                </a>
            </div>
        </article>
    </div>
<?php endforeach; ?>

hide\u post（）

函数的作用是：

var post = document.getElementsByClassName("post");

function hide_post(){
    if (post[0].style.display = "block") {
        post[0].style.display = "none"
    }
}

我是JS新手，所以我也有一些问题

我们声明var

post

等于类名为“post”的所有元素，例如我在开头添加的HTML代码，其类为

post

：

该div具有

显示：块属性。但是，当我运行所有这些代码时，它只会变成
display:none
从数据库中带出的第一个元素，其他元素不起作用

为什么会发生这种情况？
ID必须是唯一的，因为您已经命名了所有的
帖子
只有第一个会被“看到”。使ID唯一，更改
hide\u post
函数以接受要隐藏的ID名称，并将唯一ID添加到
onclick
调用中

改变

<div class="post" id="post">

使用
getElementsByClassName
时，它返回一个
HTMLCollection
。您应该迭代元素并隐藏所有元素（如果您想要的话）。现在您正在隐藏此集合的第0个元素

var posts=document.getElementsByClassName（“post”）；
为（让职位的职位）{
如果（post.style.display=“block”）{
post.style.display=“无”
}
}

如果你想隐藏一篇文章，你可以给div指定唯一的id，然后用该文章的id调用
hide\u post
。您还应该使用
getElementById
来实现这一点。注意，它不是复数形式。函数应如下所示：

函数隐藏\u post（postId）{
var post=document.getElementById（postId）；
如果（post.style.display=“block”）{
post.style.display=“无”
}
}
一种更干净的方法是

function hide_post() {
document.querySelectorAll('.post').forEach(v => {
if(v.style.display == block) v.style.display = none; }); }

对不起，我是JS的新手。。。你对ID是什么意思？我如何更改我的函数以接受ID名称？我是JS新手。我修改了我的答案，这应该会给你指出正确的方向。好吧，但是var
post
将等于什么？我的代码是：
var post=document.querySelectorAll（'.post'）；函数hide_post（idToHide）{if（idToHide.style.display=“block”）{idToHide.style.display=“none”}
var post将等同于其他东西吗？请帮助搜索带有类post的所有元素，并循环遍历每个元素，如果显示样式为block，则使它们不显示。据我所知，应该是这样的：“函数hide_post（）{document.querySelectorAll（'.post'）。forEach（v=>{if（v.style.display==block）v.style.display=none；}”应该是这样的吗？我不太明白…是的，对不起，我忘了把函数keywork放在前面我这样做了：
函数hide_post（）{document.querySelectorAll（'.post'）.forEach（v=>{if（v.style.display==“block”）v.style.display=“none”；}
当我点击它时，它不起作用，它什么也不起作用：/我的代码是一样的，在终端中，它不会给出任何错误或其他信息。。。发生了什么事？我确实这样做了，但现在当我检查终端时，它标记了以下内容：
uncaughtypeerror:not read属性'style'of null at hide_post at htmldevelment.onclick
我能做什么？我还将数据库中的唯一ID分配给divs…您是否像Dave说的那样使用ID调用函数<代码>哦，现在它正在工作！我没有在
document.getElementsByClassName（“post”）上正确设置类名
<div class="post" id="post<?php echo $post['ID']; ?>">

<div class="x_hover" onclick="hide_post()">

<div class="x_hover" onclick="hide_post('post<?php echo $post['ID']; ?>')">

function hide_post(idToHide){
    if (idToHide.style.display = "block") {
        idToHide.style.display = "none"
    }
}

function hide_post() {
document.querySelectorAll('.post').forEach(v => {
if(v.style.display == block) v.style.display = none; }); }