classList.toggle() 只工作一次

Question

當我單擊不同的 div 時，我試圖實現一個不同的彈出窗口。 下面是一個例子：

<div class="column" onclick="togglePopup('popup', 2)">Residential cleaning</div> <!--Function used here. -->
                        <div id="overlay">
                            <div class="popup">
                                <div class="popup_content">
                                    <div class="close_btn" onclick="closePopup('popup',2)">&times;</div>
                                    <h1>Some heading</h1>
                                    <p>SOME TEXT</p>
                                    <img src="assets/some_image.jpg" alt="image" width="249">
                                </div>
                            </div> <!--END of the popup window -->
                        </div>

當我點擊類列的 div 時，我應該看到彈出的 div，但它只適用於第一個。 這是 JavaScript：

function togglePopup(popup_class, div_num){
    overlay.style.display="flex";
    let all_divs = document.getElementsByClassName(popup_class);
    let my_div = all_divs[div_num-1];
    my_div.classList.toggle("active");
    console.log(my_div)
    
}

function closePopup(popup_class, div_num){
    overlay.style.display="none";
    let all_divs = document.getElementsByClassName(popup_class);
    let my_div = all_divs[div_num-1];
    my_div.classList.toggle("active");
    console.log(my_div)
}

該函數將類 popup 的所有 div 保存在 let all_divs 中，然后使用參數 div_num 選擇特定的 div，最后切換類“active”（CSS 將在下面）。 但就像我說的，它只能工作一次。 順便說一下，id 覆蓋最初是隱藏的。 CSS：

.popup.active .popup_content {
    transition:all 300ms ease-in-out;
    transform:translate(-50%,-50%) scale(1);
}

#overlay  {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.7);
    z-index:1;
    display:none;
}

我真的不知道為什么會發生這種情況，它僅適用於列表“all_divs”的第一個元素。 有沒有解決的辦法？ 我已經嘗試了很多東西，並意識到它只適用於列表的第一個元素。 我沒有在代碼中包含第一個 div（有效的那個），因為它是完全相同的東西，除了 onclick="togglePopup('popup', 1)" 中的 1 之外，它有一個 2。

Answer 1

您正試圖通過不存在的索引訪問HTMLCollection 。 例如

let all_divs = document.getElementsByClassName('popup');
let my_div = all_divs[2]; // undefined

相反，您應該向打開按鈕添加數據，以通過其唯一 id 明確描述應該打開哪個彈出窗口。

此外，您應該：

• 使用querySelectorAll將addEventListener到每個相關按鈕
• 使用 html 按鈕代替 div

 const openBtns = document.querySelectorAll('.open_btn') const closeBtns = document.querySelectorAll('.close_btn') openBtns.forEach(openBtn => openBtn.addEventListener('click', (e) => { const popupIdToOpen = e.currentTarget.dataset.popup; const popupToOpen = document.querySelector(`#${popupIdToOpen}`) if (popupToOpen) { popupToOpen.classList.add('active') } })) closeBtns.forEach(closeBtn => closeBtn.addEventListener('click', (e) => { const popupToClose = e.currentTarget.closest(".overlay") if (popupToClose) { popupToClose.classList.remove('active') } }))

 .overlay { color: white; position: fixed; top: 0; background-color: #000; display: none; } .active { display: block; }

 <button class="open_btn" data-popup="popup1">Popup 1</button> <div class="overlay" id="popup1"> <button class="close_btn">&times;</button > <h1>Popup 1 heading</h1> <p>Popup 1 Content</p> </div> <button class="open_btn" data-popup="popup2">Popup 2</button> <div class="overlay" id="popup2"> <button class="close_btn">&times;</button > <h1>Popup 2 heading</h1> <p>Popup 2 Content</p> </div> <button class="open_btn" data-popup="popup3">Popup 3</button> <div class="overlay" id="popup3"> <button class="close_btn">&times;</button > <h1>Popup 3 heading</h1> <p>Popup 3 Content</p> </div>