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){&nbsp; &nbsp; if (idToHide.style.display = "block") {&nbsp; &nbsp; &nbsp; &nbsp; idToHide.style.display = "none"&nbsp; &nbsp; }}

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) {&nbsp; &nbsp; if (post.style.display = "block") {&nbsp; &nbsp; &nbsp; &nbsp; post.style.display = "none"&nbsp; &nbsp; }}如果您打算隐藏单个帖子，您可以为 div 提供唯一的 id，并hide_post使用该帖子的 id 进行调用。你也应该用getElementById它。请注意，它不是复数。函数应该是这样的：function hide_post(postId){&nbsp; &nbsp; var post = document.getElementById(postId);&nbsp; &nbsp; if (post.style.display = "block") {&nbsp; &nbsp; &nbsp; &nbsp; post.style.display = "none"&nbsp; &nbsp; }}