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的新手，所以我也有一些问题。

我们声明varpost等于类名为"0"的所有元素；post"；，例如我在开头添加的HTML代码具有类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; }); }