為什么沒有選擇 DOM 元素

Question

我有一個函數，當鼠標懸停在上面時會顯示一個 html 元素，但它似乎沒有按預期工作。

我在js文件中的代碼如下：

const htmlIc = document.querySelector('.fa-html5');
const htmlInfo = document.querySelector('.info-section');

htmlIc.addEventListener("mouseover", toggleHtml);


function toggleHtml() {
       htmlInfo.classList.add("show");
}

這是事件偵聽器正在偵聽的元素（圖標）：

<div class="icons">
     <a href="#!">
         <i class="fab fa-html5 fa-2x"></i>
     </a>
</div>

這是我希望將 show 類應用於的元素：

<div class="info-section">
     <h1>Lorem ipsum</h1>
</div>

我在這個項目中使用了SASS，通過手動在元素中添加show類進行了驗證，從那部分看是沒有問題的

Answer 1

您可以通過style display選項在切換它們的地方做一些事情。 您可以做的一件事是，如果您已習慣使用show類，那么您需要在顯示和隱藏之間創建類似的切換。

 const htmlIc = document.querySelector(".fa-html5"); const htmlInfo = document.querySelector(".info-section"); htmlIc.addEventListener("mouseover", toggleHtml); function toggleHtml() { let infoSection = document.querySelector(".info-section"); if (infoSection.style.display === "none") { infoSection.style.display = "block"; } else { infoSection.style.display = "none"; } }

 <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div class="icons"> <a href="#!"> <i class="fab fa-html5 fa-2x">hh</i> </a> <div class="info-section" style="display: none;"> <h1>Lorem ipsum</h1> </div> </div> <script src="src/index.js"></script> </body> </html>

Answer 2

這是工作！ 還添加 .show css 類

 const htmlIc = document.querySelector('.fa-html5'); const htmlInfo = document.querySelector('.info-section'); htmlIc.addEventListener("mouseover", toggleHtml); function toggleHtml() { htmlInfo.classList.add("show"); }

 <div class="icons"> <a href="#!"> <i class="fab fa-html5 fa-2x"></i> </a> </div> <div class="info-section"> <h1>Lorem ipsum</h1> </div>

Answer 3

htmlInfo.classList.toggle("show");

我只需要為 classList 使用 .toggle 方法。 由於我使用的是懸停效果，因此切換更適合這種情況。 在此解決方案的評論中歸功於@BerkCoşar

為什么沒有選擇 DOM 元素

問題描述

3 個解決方案

解決方案1
0 2020-11-07 16:29:44

解決方案2
0 2020-11-07 16:32:45

解決方案3
0 已采納 2020-11-07 16:53:20

為什么沒有選擇 DOM 元素

問題描述

3 個解決方案

解決方案1 0 2020-11-07 16:29:44

解決方案2 0 2020-11-07 16:32:45

解決方案3 0 已采納 2020-11-07 16:53:20

解決方案1
0 2020-11-07 16:29:44

解決方案2
0 2020-11-07 16:32:45

解決方案3
0 已采納 2020-11-07 16:53:20