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

Question

我正在使用带有 PHP foreach 循环的 ORDER BY RAND() 从数据库中获取文章：

<?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”的元素，比如我开头添加的HTML代码，有post这个类：

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

此 div 具有 display: block; 属性。但是，当我运行所有这些代码时，它只会变成display: none 将我们从数据库中带入的第一个元素，它不适用于其余的元素......

为什么会这样？

Answer 1

ID 必须是唯一的，并且由于您已命名所有 post，因此只有第一个会被“看到”。使 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; }); }