我使用 PHP 動態(tài)渲染從數(shù)據(jù)庫獲取的這些列表，每個列表都有相同的類，因?yàn)槲覠o法更改它，它會動態(tài)渲染。我通過 JavaScript 選擇這些類，并在單擊時(shí)創(chuàng)建一個事件，以使用隱藏類打開和關(guān)閉它們。
現(xiàn)在我有一個問題，這個事件對我有用，并且僅對第一個呈現(xiàn)的列表做出反應(yīng)，但對其他列表不起作用。有什么方法可以做到這一點(diǎn)，我嘗試了 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');
}
});
這是一個模板： 模板 在此輸入圖像描述
2
0
0
您需要使用querySelectorAll()而不是querySelector()。
這樣您將定位所有元素，而不是第一個匹配的元素。 然后，您應(yīng)該循環(huán)遍歷每個事件并添加一個事件偵聽器，如下所示：
let kartons = document.querySelectorAll(".abc");
kartons.forEach(el => {
el.addEventListener("click", (event) => {
// Something happens on click
})
});
您僅選擇第一個 .likarton 實(shí)例 - 這是通過使用 querySelectorAll() 修復(fù)的
由于您使用的是 addEventListener，因此您將獲得被單擊的確切項(xiàng)目作為回調(diào)中的參數(shù)。
使用此功能的正確 JavaScript 是 addEventListener('click', (event) => {})
要引用觸發(fā)事件處理程序的元素，您可以使用 event.currentTarget
從那時(shí)起，您可以選擇 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');
}
});
}
參考文獻(xiàn)：
