JS中如何选择多个同名的class类-PHP中文网问答

我使用 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');
  }
});

这是一个模板： 模板在此输入图像描述

全部回复(2)

P粉6525239802024-03-27 14:50:25 2楼

您需要使用querySelectorAll()而不是querySelector()。

这样您将定位所有元素，而不是第一个匹配的元素。然后，您应该循环遍历每个事件并添加一个事件侦听器，如下所示：

let kartons  = document.querySelectorAll(".abc");

kartons.forEach(el => {
    el.addEventListener("click", (event) => {
         // Something happens on click

    })
});