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; ?>

如您所见，包含类x_hover的div有一个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的新手，所以我也有一些问题。

我们声明var等于类名为"post“的所有元素，例如我在开头添加的具有类post的post代码

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

此div具有display: block;属性。然而，当我运行所有这些代码时，它只变成了display: none，这是从数据库中带给我们的第一个元素，它不能与其他元素一起工作……

为什么会发生这种情况？

Answer 1

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

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

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

for (let post of posts) {
    if (post.style.display = "block") {
        post.style.display = "none"
    }
}

如果您打算隐藏单个帖子，可以为div提供惟一的id，并使用该帖子的id调用hide_post。此外，您还应该使用getElementById。请注意，它不是复数。函数应如下所示：

function hide_post(postId){
    var post = document.getElementById(postId);

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

Answer 3

一种更简洁的方法是。

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