动态内容上的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 是通过控制器从数据库中获取的数组，每次我发布 post 时，正文都会像上面那样添加新的 div 以及所需的数据从 $post 数组中，现在如上所示，child div 和 class "editanddelete" 通过给 class "none 隐藏" 即 display:none；现在 javascript 我想做一个事件，当我点击 child div 和 class="options" 时，它会切换“none” child div 的 class 与 class="editanddelete"，如下所示：

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

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

当我执行此代码时，它在动态创建的第一个 post (div) 上运行良好，但是当我添加另一个 post 时，该事件将不起作用在第二个 post div 上，我尝试使用 querySelectorAll 并循环将动态创建的“选项”classes，但它没有按预期工作并且事件影响其他 divs，我想要的是为所有 divs 制作事件，每个 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');
})

动态内容上的js事件循环

js event looping on dynamic content

html

javascript

php

foreach

codeigniter