我使用 PHP 动态渲染从数据库获取的这些列表，每个列表都有相同的类，因为我无法更改它，它会动态渲染。我通过 JavaScript 选择这些类，并在单击时创建一个事件，以使用隐藏类打开和关闭它们。
现在我有一个问题，这个事件对我有用，并且仅对第一个呈现的列表做出反应，但对其他列表不起作用。有什么方法可以做到这一点，我尝试了 querySelectorAll 和 getElementsByClassName 以及其他一些选择器，但没有任何效果。 PHP 代码：
<ul class="kartonul">
<?php
$user = get_user();
$user_id = $user['id'];
$query = "SELECT * FROM karton WHERE id_pacijent = $user_id";
$result = query($query);
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$karton = get_karton($user_id);
foreach($result as $karton) {
echo "<li class='likarton'>Karton " .$karton['id']." <i class='fa-solid fa-envelope'></i></li>
<div class='kartondiv hiddenRaspored'>
<label class='kartonlabel'>Nalaz:</label> <br/>
<p>" . $karton['nalaz'] . "</p>
<label class='kartonlabel'>Dijagnoza:</label> <br/>
<p>" . $karton['dijagnoza'] . "</p>
<label class='kartonlabel'>Pregled:</label> <br/>
<p>" . $karton['pregled'] . "</p>
</div>";
}
}
}
?>
</ul>
JavaScript 代码：
let karton = document.querySelector('.likarton');
let div = document.querySelector('.kartondiv');
karton.addEventListener('click', () => {
if (div.classList.contains('hidden')) {
div.classList.remove('hidden');
} else {
div.classList.add('hidden');
}
});
这是一个模板： 模板 在此输入图像描述
您需要使用
querySelectorAll()而不是querySelector()。这样您将定位所有元素，而不是第一个匹配的元素。 然后，您应该循环遍历每个事件并添加一个事件侦听器，如下所示：
let kartons = document.querySelectorAll(".abc"); kartons.forEach(el => { el.addEventListener("click", (event) => { // Something happens on click }) });您仅选择第一个
.likarton实例 - 这是通过使用querySelectorAll()修复的由于您使用的是
addEventListener，因此您将获得被单击的确切项目作为回调中的参数。使用此功能的正确 JavaScript 是
addEventListener('click', (event) => {})要引用触发事件处理程序的元素，您可以使用
event.currentTarget从那时起，您可以选择 div 并使用
.classList.*修改类列表示例
let karton = document.querySelectorAll('.likarton'); for (let i = 0; i { let div = document.querySelector('.kartondiv'); if (div.classList.contains('hidden')) { div.classList.remove('hidden'); } else { div.classList.add('hidden'); } }); }参考文献：