国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

JS中如何選擇多個同名的class類
P粉005134685
P粉005134685 2024-03-26 17:46:43
[PHP討論組]

我使用 PHP 動態(tài)渲染從數(shù)據(jù)庫獲取的這些列表,每個列表都有相同的類,因為我無法更改它,它會動態(tài)渲染。我通過 JavaScript 選擇這些類,并在單擊時創(chuàng)建一個事件,以使用隱藏類打開和關閉它們。

現(xiàn)在我有一個問題,這個事件對我有用,并且僅對第一個呈現(xià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');
  }
});

這是一個模板: 模板 在此輸入圖像描述

P粉005134685
P粉005134685

全部回復(2)
P粉652523980

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

這樣您將定位所有元素,而不是第一個匹配的元素。 然后,您應該循環(huán)遍歷每個事件并添加一個事件偵聽器,如下所示:

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

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

    })
});
P粉674999420

您僅選擇第一個 .likarton 實例 - 這是通過使用 querySelectorAll() 修復的


由于您使用的是 addEventListener,因此您將獲得被單擊的確切項目作為回調(diào)中的參數(shù)。

使用此功能的正確 JavaScript 是 addEventListener('click', (event) => {})

要引用觸發(fā)事件處理程序的元素,您可以使用 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');
    }
  });
}

參考文獻:

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓,幫助PHP學習者快速成長!
關注服務號 技術交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號