JS 在 PHP foreach 中不显示任何内容，仅适用于第一个元素

Question

ORDER BY RAND()我使用 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; ?>正如你所看到的，带有该类的 divx_hover有一个 onclick 属性：<div class="x_hover" onclick="hide_post()">    <img src="<?php echo ROUTE; ?>/icons/cross.svg"></div>该hide_post()函数的作用是这样的：var post = document.getElementsByClassName("post");function hide_post(){    if (post[0].style.display = "block") {        post[0].style.display = "none"    }}我是 JS 新手，所以我也有一些问题。我们声明 varpost等于所有类名为“post”的元素，比如我在开头添加的 HTML 代码，有这样的类post：<div class="post" id="post">这个div有display: block;属性。然而，当我运行所有这些代码时，它只变成display: none从数据库中为我们带来的第一个元素，它不适用于其余的元素......为什么会发生这种情况？

Answer 1

ID 必须是唯一的，并且由于您已经命名了所有 ID，因此post只有第一个 ID 才会被“看到”。使 ID 唯一，更改您的hide_post函数以接受要隐藏的 ID 名称，并将唯一 ID 添加到您的onclick调用中。

改变

<div class="post" id="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']; ?>')">

最后，修改您的hide_post函数以接受要显示或隐藏的 ID 的名称。

function hide_post(idToHide){

    if (idToHide.style.display = "block") {

        idToHide.style.display = "none"

    }

}

Answer 2

一种更干净的方法是这样做。

function hide_post() {

document.querySelectorAll('.post').forEach(v => {

if(v.style.display == block) v.style.display = none; }); }

Answer 3

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

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

for (let post of posts) {

    if (post.style.display = "block") {

        post.style.display = "none"

    }

}

如果您打算隐藏单个帖子，您可以为 div 提供唯一的 id，并hide_post使用该帖子的 id 进行调用。你也应该用getElementById它。请注意，它不是复数。函数应该是这样的：

function hide_post(postId){

    var post = document.getElementById(postId);

    if (post.style.display = "block") {

        post.style.display = "none"

    }

}