Question

我有一个forEach循环数据库打印出照片上的评论。每个评论都有一个带有编辑和删除按钮的编辑表单。按下编辑按钮时，它会在“.editForm”中添加一个“.show”类。问题是，这仅适用于单击编辑按钮时的第一个注释...它不会将类.show添加到除第一个实例之外的任何其他div（表单）。我试图这样做＆gt;当我点击编辑按钮时，显示评论下面的表格以便能够编辑它。

CSS

.editForm {
    display: none;
}
.editForm.show{
    display: block;
}

JS

document.querySelector(".editButton").addEventListener("click", function(){                                          
    document.querySelector(".editForm").classList.toggle("show"); 
});

见图：

你可以看到它适用于第一个。但对于第二个，如果我查看控制台，按钮什么也不做，并没有添加类...

另外，我是否需要学习AJAX以便能够“就地”编辑评论？而不是打开表格＆gt;填充内容＆gt;改变它＆gt;邮寄路线

Answer 1

querySelector()仅返回第一个匹配元素。您需要使用querySelectorAll()来获取所有这些内容。它返回NodeList，因此您需要循环它以处理所有这些。然后，您将需要使用DOM遍历来查找相关的.editForm元素。

我的下面的代码确认editButton和editForm元素都是同一DIV中的子元素。您可能需要根据实际的HTML来调整它。

Array.from(document.querySelectorAll(".editButton")).forEach(button => button.addEventListener("click", function(){                                          
    this.parentNode.querySelector(".editForm").classList.toggle("show"); 
    })
);

如果您决定使用jQuery，则等效于：

$(".editButton").click(function() {
    $(this).closest("div").find(".editForm").toggleClass("show");
});

Answer 2

当你使用CSS类时，javascript通常只会触及该类的第一个实例，然后打破其余的类。您可能需要做的是为html元素创建唯一ID（您可以将style =“display：none;”直接添加到html元素，以避免担心覆盖所有可能ID的CSS文件），然后在JS中。例如，如果您使用PHP，则可以执行以下操作：

<?php foreach($db_row as $item): ?>
document.querySelector("#editButton-<?php echo $item['id'] ?>").addEventListener("click", function(){                                          
    document.querySelector("#editForm-<?php echo $item['id'] ?>").classList.toggle("show"); 
});
<?php endforeach; ?>

事件监听器显示/隐藏从循环填充的div

2 个答案: