通過 JavaScript 從 html 表中的 PHP 腳本顯示和隱藏內容

Question

我有一個 HTML 表，想要顯示和隱藏 class 用於僅與 javascript 分開的多個 div。該表將從 PHP 腳本生成，其中包含 1000 個標簽。

我希望聰明的 javascript function 可以完成這項工作：

 function showiteam() { document.querySelector(".zoom").style.display = "block"; } function hideiteam(x) { document.querySelector(".zoom").style.display = "none"; }

 #customers td, #customers th { border: 1px solid #ddd; padding: 8px; }.zoom { display: none; }

 <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td onmouseover="showiteam()" onmouseout="hideiteam()"> Google <div class="zoom">This Testing text</div> </td> <td>Yahoo</td> <td>Facebook</td> </tr> <tr> <td onmouseover="showiteam()" onmouseout="hideiteam()"> Google <div class="zoom">This Testing text</div> </td> <td>Yahoo</td> <td>Facebook</td> </tr> </table>

Answer 1

對querySelector的調用僅返回第一個匹配的元素。 您可以使用querySelectorAll來匹配多個元素。 但是，您可能不想在將鼠標懸停在任何一個表格單元格上時顯示/隱藏所有.zoom元素。

相反，傳遞對在 HTML 中調用mouseover和mouseout事件的表格單元格的引用，並對該元素調用querySelector ，這樣您就只匹配該單元格中包含的.zoom元素：

 function showiteam(cell) { cell.querySelector(".zoom").style.display = "block"; } function hideiteam(cell) { cell.querySelector(".zoom").style.display = "none"; }

 #customers td, #customers th { border: 1px solid #ddd; padding: 8px; }.zoom { display: none; }

 <table id="customers"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td onmouseover="showiteam(this)" onmouseout="hideiteam(this)"> Google <div class="zoom">This Testing text</div> </td> <td>Yahoo</td> <td>Facebook</td> </tr> <tr> <td onmouseover="showiteam(this)" onmouseout="hideiteam(this)"> Google <div class="zoom">This Testing text</div> </td> <td>Yahoo</td> <td>Facebook</td> </tr> </table>

Answer 2

不確定我是否理解正確你的要求，但這是我會做的

// in html
<td  onmouseover="showiteam()" onmouseout="hideiteam()"> 
     Google
     <div class="zoom is-hidden">This Testing text</div>
</td>

// in css (just replace .zoom with .is-hidden)
.is-hidden {
    display: none;
}

// in js
function showiteam(){
   document.querySelector(".zoom").classList.remove("is-hidden");
}

function hideiteam(x){
    document.querySelector(".zoom").classList.add("is-hidden");
}

Answer 3

首先，我會說 CSS 解決方案會更簡單，所以我將在下面包含它。

但是，由於您在問題中指定了 Javascript，我將直接回答您的問題。 問題是您的 querySelector 在整個文檔上，而不是在 event.target 上。 所以純 javascript 修復是：

event.target.querySelector(".zoom").style.display = "block";

但是，我真的認為更好的解決方案是完全刪除您的 javascript，將縮放 class 放在 td 上並添加此 CSS 定義：

.zoom:hover div {display:block}

如果你能做到的話，那就更整潔了。