本文介紹如何使用 JavaScript 實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停在一個(gè) `div.first` 中的 `li` 元素上時(shí)，為 `div.second` 中具有相同 ID 的 `li` 元素添加 `.active` 類。該方案適用于 ID 動(dòng)態(tài)生成且事先未知的情況，并提供詳細(xì)的 JavaScript 代碼示例和 CSS 樣式，方便讀者理解和應(yīng)用。

在 Web 開發(fā)中，有時(shí)我們需要實(shí)現(xiàn)一種交互效果：當(dāng)鼠標(biāo)懸停在一個(gè)區(qū)域的元素上時(shí)，另一個(gè)區(qū)域的對(duì)應(yīng)元素也發(fā)生變化。本文將介紹如何使用 JavaScript 實(shí)現(xiàn)這一功能，具體來說，當(dāng)鼠標(biāo)懸停在一個(gè) div.first 中的 li 元素上時(shí)，為 div.second 中具有相同 ID 的 li 元素添加 .active 類。

實(shí)現(xiàn)原理

核心思想是利用 JavaScript 監(jiān)聽 div.first 中所有 li 元素的 mouseover 和 mouseout 事件。當(dāng) mouseover 事件觸發(fā)時(shí)，獲取當(dāng)前 li 元素的 ID，然后在 div.second 中查找具有相同 ID 的 li 元素，并添加 .active 類。當(dāng) mouseout 事件觸發(fā)時(shí)，移除 .active 類。

代碼實(shí)現(xiàn)

以下是完整的 JavaScript 代碼實(shí)現(xiàn)：

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

document.querySelectorAll(".first ul li").forEach(li => {
  li.addEventListener("mouseover", e => {
    document.querySelectorAll(`#${e.target.id}`)[1].classList.add("active");
  });
  li.addEventListener("mouseout", e => {
    document.querySelectorAll(`#${e.target.id}`)[1].classList.remove("active");
  });
});

這段代碼首先使用 querySelectorAll 方法獲取所有位于 .first 類下的 ul 元素中的 li 元素。然后，使用 forEach 方法遍歷這些 li 元素，并為每個(gè)元素添加 mouseover 和 mouseout 事件監(jiān)聽器。

在 mouseover 事件監(jiān)聽器中，e.target.id 獲取當(dāng)前鼠標(biāo)懸停的 li 元素的 ID。然后，使用 querySelectorAll(#${e.target.id}) 查找具有相同 ID 的所有元素。由于我們需要操作的是 div.second 中的元素，因此我們使用 [1] 來獲取第二個(gè)匹配的元素（第一個(gè)匹配的元素是 div.first 中的 li 元素本身）。最后，使用 classList.add("active") 為該元素添加 .active 類。

騰訊元寶

騰訊混元平臺(tái)推出的AI助手

223

查看詳情

mouseout 事件監(jiān)聽器中的邏輯類似，只是將 classList.add("active") 替換為 classList.remove("active")，用于移除 .active 類。

HTML 結(jié)構(gòu)

以下是 HTML 結(jié)構(gòu)示例：

<div class="first">
  <ul>
    <li id="one">Lorem</li>
    <li id="two">Ipsum</li>
    <li id="three">Dolor</li>
  </ul>
</div>

<div class="second">
  <ul>
    <li id="one">Lorem</li>
    <li id="two">Ipsum</li>
    <li id="three">Dolor</li>
  </ul>
</div>

CSS 樣式

為了使 .active 類生效，我們需要定義相應(yīng)的 CSS 樣式：

.active {
  background: #CCC;
}

這段 CSS 代碼會(huì)將具有 .active 類的元素的背景色設(shè)置為灰色。

注意事項(xiàng)

• ID 唯一性： 此方法依賴于 ID 的唯一性。確保頁面上所有 li 元素的 ID 都是唯一的，否則可能會(huì)導(dǎo)致意外的結(jié)果。
• 性能優(yōu)化： 如果頁面上有大量的 li 元素，頻繁的 querySelectorAll 操作可能會(huì)影響性能?？梢钥紤]使用事件委托等技術(shù)進(jìn)行優(yōu)化。
• 適用場(chǎng)景： 此方法適用于 ID 動(dòng)態(tài)生成且事先未知的情況。如果 ID 是靜態(tài)的，可以使用 CSS :hover 偽類和相鄰兄弟選擇器等方法來實(shí)現(xiàn)類似的效果，性能更高。

總結(jié)

本文介紹了如何使用 JavaScript 實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停在一個(gè) div.first 中的 li 元素上時(shí)，為 div.second 中具有相同 ID 的 li 元素添加 .active 類。該方案適用于 ID 動(dòng)態(tài)生成且事先未知的情況，并提供了詳細(xì)的代碼示例和注意事項(xiàng)。希望本文能夠幫助讀者更好地理解和應(yīng)用 JavaScript 技術(shù)。

以上就是使用 JavaScript 通過 ID 匹配不同父元素中的元素（鼠標(biāo)懸停時(shí)）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！