亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

JS 在 PHP foreach 中不顯示任何內容,僅適用于第一個元素

JS 在 PHP foreach 中不顯示任何內容,僅適用于第一個元素

PHP
PIPIONE 2024-01-19 15:49:37
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從數據庫中為我們帶來的第一個元素,它不適用于其余的元素......為什么會發生這種情況?
查看完整描述

3 回答

?
暮色呼如

TA貢獻1853條經驗 獲得超9個贊

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"

    }

}


查看完整回答
反對 回復 2024-01-19
?
莫回無

TA貢獻1865條經驗 獲得超7個贊

一種更干凈的方法是這樣做。


function hide_post() {

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

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


查看完整回答
反對 回復 2024-01-19
?
慕蓋茨4494581

TA貢獻1850條經驗 獲得超11個贊

當您使用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"

    }

}


查看完整回答
反對 回復 2024-01-19
  • 3 回答
  • 0 關注
  • 199 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號