動態內容上的js事件回圈 -有解無憂

我的homepage.php檔案中有這個div：

<? php foreach($posts as $post) 。? >
   </div class="post>
            <div class="options"> 
                <div class="options"> </div>>
                <div class="option"/span>> </div>>
                <div class="option"/span>> </div>>
            </div>/span>
            <div class="none editanddelete">/span>
                <button type="button" class="edit"> edit</button>。
                <button type="button" class="delete">> delete</button>

            </div>/span>
            <div class="imageandname"> 
                <img src="< ? php echo $post->user_image ? >">
                <div class="username"><? php echo $post->username ? ></div>
            </div>/span>
            <div class="post_body"/span>>
                <?php echo $post-> post_body ? ><br>

            </div>/span>
   </div>/span>
<?php endforeach; ? >

$posts是一個陣列，通過控制器來自資料庫，每次我發布一個帖子，主體將添加新的div，就像上面的$post陣列中需要的資料，現在如上所示，具有 "editanddelete "類的子div被隱藏，給予 "none "類，顯示：none。現在我想用javascript制作一個事件，當我點擊class="options "的子DIV時，它將切換class="editanddelete "的子DIV的 "none "類，如下：

post = document.querySelector(' .post')。
options = post.querySelector('.options') 。
editanddelete = options.querySelector('.editanddelete') 。

options.addEventListener('click', () => {
   editanddelete.classList.toggle（'none'）。
})

當我執行這段代碼時，它在第一個動態創建的帖子（div）上運行良好，但當我添加另一個帖子時，該事件在第二個帖子的div上不起作用，我試圖使用querySelectorAll和回圈 "options "類，這將是動態創建的，但它沒有像預期的那樣作業，該事件影響到其他div，我想要的是使該事件適用于所有div，每個div在它自己身上

uj5u.com熱心網友回復：

你需要使用相同的.editanddelete元素，因為.options被點擊了。

JS代碼可以像

一樣

var options = document.querySelector(' .options') 。

//這里可能是為了在選項上進行回圈（我現在無法測驗）。
options.addEventListener('click', () => {
   this.parentNode.querySelector('.editanddelete').classList.toggle('none') 。
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/311020.html

標籤：

上一篇：Codeigniter全域變數問題

下一篇：我的目標是使用谷歌地圖和codingniter創建一個關于多邊形的集群。