动态内容上的 js 事件循环

Question

我的 homepage.php 文件中有这个 div：

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

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

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

$posts 是通过控制器来自数据库的数组，每次我发布帖子时，body 都会像上面一样添加新的 div，其中包含 $post 数组所需的数据，现在如上所示，子 div 与类“editanddelete”通过给类“none”隐藏，即display：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 并循环“选项”类将动态创建，但它不能按预期工作，并且该事件会影响其他 div，我想要的是为所有 div 制作事件，每个 div 都是自己的

Answer 1

您需要使用与单击.options 相同的.editanddelete 元素。

JS 代码可能是这样的

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

// here maybe would be for cycle over options (I can't test it now)
options.addEventListener('click', () => {
   this.parentNode.querySelector('.editanddelete').classList.toggle('none');
})