本教程將詳細(xì)介紹如何使用javascript動(dòng)態(tài)控制網(wǎng)頁(yè)元素的顯示與隱藏，特別是根據(jù)其同級(jí)（兄弟）元素的內(nèi)容進(jìn)行條件判斷。我們將通過(guò)一個(gè)具體示例，演示如何遍歷多個(gè)元素實(shí)例，并利用`queryselectorall`和`foreach`方法，結(jié)合`textcontent`屬性，實(shí)現(xiàn)精確的局部?jī)?nèi)容驅(qū)動(dòng)的ui交互邏輯。

在網(wǎng)頁(yè)開(kāi)發(fā)中，我們經(jīng)常遇到需要根據(jù)特定條件動(dòng)態(tài)調(diào)整元素顯示狀態(tài)的需求。一個(gè)常見(jiàn)的場(chǎng)景是，當(dāng)商品價(jià)格為“免費(fèi)”時(shí)，隱藏其旁邊的貨幣符號(hào)（如“$”），而當(dāng)價(jià)格為具體數(shù)值時(shí)，則顯示貨幣符號(hào)。這需要我們能夠識(shí)別頁(yè)面上所有符合條件的元素組，并對(duì)每組獨(dú)立進(jìn)行判斷和操作。

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

假設(shè)我們有以下HTML結(jié)構(gòu)，其中包含多個(gè)商品價(jià)格顯示區(qū)域：

<div class="priceParent">
  <div class="priceTag">$</div>
  <div class="price">Free</div>
</div>

<div class="priceParent">
  <div class="priceTag">$</div>
  <div class="price">60</div>
</div>

<div class="priceParent">
  <div class="priceTag">€</div>
  <div class="price">19.99</div>
</div>

<div class="priceParent">
  <div class="priceTag">￥</div>
  <div class="price">Free</div>
</div>

在這個(gè)結(jié)構(gòu)中，每個(gè).priceParent代表一個(gè)獨(dú)立的商品價(jià)格顯示單元，它包含一個(gè).priceTag（貨幣符號(hào)）和一個(gè).price（價(jià)格）。我們的目標(biāo)是：如果.price元素的內(nèi)容是“Free”，則隱藏該單元格內(nèi)的.priceTag。

問(wèn)題分析與初步嘗試的局限性

初學(xué)者在處理這類問(wèn)題時(shí)，可能會(huì)遇到一些挑戰(zhàn)。例如，直接使用document.getElementsByClassName("price")會(huì)返回一個(gè)HTMLCollection，而不是單個(gè)元素。嘗試直接訪問(wèn)price.textContent或修改priceTag.style.display將不會(huì)按預(yù)期工作，因?yàn)樗僮鞯氖钦麄€(gè)集合，或者在沒(méi)有正確迭代的情況下，只影響第一個(gè)匹配的元素，甚至導(dǎo)致錯(cuò)誤。

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

錯(cuò)誤的嘗試可能如下：

// 這種方式無(wú)法正確處理多個(gè)實(shí)例，并且直接訪問(wèn)集合的textContent是錯(cuò)誤的
if (document.getElementsByClassName("bookPrice") != null) { // bookPrice類不存在，這里會(huì)出錯(cuò)
  var price = document.getElementsByClassName("price"); // 獲取所有.price元素
  var priceTag = document.getElementsByClassName("priceTag"); // 獲取所有.priceTag元素

  // 這里的price.textContent會(huì)嘗試訪問(wèn)集合的textContent，導(dǎo)致undefined或錯(cuò)誤
  // 即使能訪問(wèn)，也只針對(duì)第一個(gè)元素，且賦值操作 (price.textContent = "Free") 并非比較
  if ((price.textContent = "Free")) { // 賦值而非比較，且操作的是集合
    priceTag.style.display = "none"; // 同樣，操作的是集合
  } else if (price.textContent != "Free") {
    priceTag.style.display = "block";
  }
}

上述代碼存在幾個(gè)主要問(wèn)題：

騰訊元寶

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

223

查看詳情

1. document.getElementsByClassName("bookPrice") 條件中的類名與HTML不匹配。
2. getElementsByClassName 返回的是一個(gè)HTMLCollection，不能直接對(duì)其使用.textContent屬性。
3. 即使能訪問(wèn)，=是賦值操作，不是比較操作（應(yīng)使用===）。
4. 它沒(méi)有對(duì)每個(gè)獨(dú)立的priceParent進(jìn)行迭代，導(dǎo)致無(wú)法針對(duì)每個(gè)單元格獨(dú)立判斷和操作。

解決方案：利用querySelectorAll和forEach

要正確實(shí)現(xiàn)這一功能，我們需要：

1. 獲取所有包含價(jià)格信息的父容器（.priceParent）。
2. 遍歷這些父容器。
3. 在每個(gè)父容器內(nèi)部，找到對(duì)應(yīng)的.priceTag和.price元素。
4. 根據(jù).price元素的內(nèi)容，獨(dú)立地控制該父容器內(nèi)的.priceTag的顯示狀態(tài)。

這可以通過(guò)document.querySelectorAll()和Array.prototype.forEach()方法高效地完成。

完整代碼示例

document.addEventListener('DOMContentLoaded', () => {
  // 1. 選取所有包含價(jià)格信息的父容器
  const priceParents = document.querySelectorAll('.priceParent');

  // 2. 遍歷每一個(gè)父容器
  priceParents.forEach((parentItem) => {
    // 3. 在當(dāng)前父容器內(nèi)部，選取對(duì)應(yīng)的貨幣符號(hào)和價(jià)格元素
    const priceTag = parentItem.querySelector('.priceTag');
    const price = parentItem.querySelector('.price');

    // 確保找到了這兩個(gè)元素，避免空引用錯(cuò)誤
    if (price && priceTag) {
      // 4. 判斷價(jià)格內(nèi)容是否為“Free”
      if (price.textContent.trim() === 'Free') {
        // 如果是“Free”，則隱藏貨幣符號(hào)
        priceTag.style.display = 'none';
      } else {
        // 否則，確保貨幣符號(hào)是顯示的 (如果默認(rèn)是隱藏的，則需要顯式設(shè)置)
        // priceTag.style.display = 'block'; // 視情況而定，如果默認(rèn)是block，可以省略
      }
    }
  });
});

代碼解析

• document.addEventListener('DOMContentLoaded', () => { ... });: 這是一個(gè)最佳實(shí)踐，確保JavaScript代碼在DOM完全加載和解析之后執(zhí)行，避免在元素還未存在時(shí)就嘗試操作它們。
• const priceParents = document.querySelectorAll('.priceParent');: querySelectorAll() 方法返回文檔中與指定選擇器匹配的所有元素的靜態(tài)NodeList。這里我們獲取了所有類名為priceParent的div元素。
• priceParents.forEach((parentItem) => { ... });: NodeList對(duì)象雖然不是真正的數(shù)組，但它支持forEach方法（在現(xiàn)代瀏覽器中）。我們使用它來(lái)遍歷每一個(gè)priceParent元素，parentItem代表當(dāng)前正在處理的priceParent元素。
• const priceTag = parentItem.querySelector('.priceTag');: 在forEach循環(huán)內(nèi)部，我們使用parentItem.querySelector('.priceTag')。這里的關(guān)鍵是parentItem，它確保我們只在當(dāng)前的priceParent元素內(nèi)部查找.priceTag，而不是在整個(gè)文檔中查找。這保證了操作的局部性。
• const price = parentItem.querySelector('.price');: 同理，獲取當(dāng)前parentItem內(nèi)部的.price元素。
• if (price && priceTag): 這是一個(gè)簡(jiǎn)單的空值檢查，確保querySelector找到了對(duì)應(yīng)的元素，防止在元素不存在時(shí)嘗試訪問(wèn)其屬性而導(dǎo)致錯(cuò)誤。
• price.textContent.trim() === 'Free':
  • price.textContent 獲取元素的所有文本內(nèi)容，包括其子節(jié)點(diǎn)的文本。
  • .trim() 方法用于移除字符串兩端的空白字符（例如，如果HTML中價(jià)格文本是<div class="price"> Free </div>，textContent會(huì)得到Free，trim()后變?yōu)镕ree）。這增加了判斷的健壯性。
  • === 是嚴(yán)格相等運(yùn)算符，用于比較值和類型。
• priceTag.style.display = 'none';: 如果條件滿足，將貨幣符號(hào)的display樣式設(shè)置為none，使其隱藏。
• priceTag.style.display = 'block';: 如果價(jià)格不是“Free”，則可以顯式地將display設(shè)置為block（或其他適合的顯示類型，如inline-block），以確保它可見(jiàn)。如果.priceTag默認(rèn)就是可見(jiàn)的，并且你只關(guān)心隱藏邏輯，這一行可以省略。

注意事項(xiàng)與最佳實(shí)踐

1. CSS 類管理優(yōu)于直接操作 style.display: 直接操作element.style.display雖然有效，但通常不被認(rèn)為是最佳實(shí)踐。更好的方法是定義CSS類來(lái)控制顯示狀態(tài)，然后通過(guò)JavaScript添加或移除這些類。 例如，在CSS中定義：

   .hidden {
     display: none !important;
   }

   登錄后復(fù)制

   在JavaScript中：

   if (price.textContent.trim() === 'Free') {
     priceTag.classList.add('hidden'); // 添加隱藏類
   } else {
     priceTag.classList.remove('hidden'); // 移除隱藏類
   }

   登錄后復(fù)制

   這種方法將樣式與行為分離，使代碼更易維護(hù)，并且可以方便地結(jié)合CSS過(guò)渡和動(dòng)畫。

2. 性能考慮: 對(duì)于頁(yè)面上數(shù)量巨大的元素（例如幾千個(gè)），querySelectorAll和forEach的組合可能在初始化時(shí)造成輕微的性能開(kāi)銷。但在大多數(shù)常見(jiàn)應(yīng)用場(chǎng)景中，這種開(kāi)銷是微不足道的。如果遇到極端性能問(wèn)題，可以考慮使用更底層的DOM操作或虛擬DOM庫(kù)。

3. 動(dòng)態(tài)加載內(nèi)容: 如果priceParent元素是通過(guò)AJAX請(qǐng)求或其他方式動(dòng)態(tài)添加到頁(yè)面上的，那么在DOMContentLoaded事件中執(zhí)行的代碼將不會(huì)對(duì)這些新元素生效。在這種情況下，你需要：

   • 在每次動(dòng)態(tài)內(nèi)容加載完成后，重新運(yùn)行上述JavaScript邏輯。
   • 或者，使用事件委托，但對(duì)于顯示/隱藏這種非事件觸發(fā)的場(chǎng)景，重新運(yùn)行邏輯更直接。

4. 可訪問(wèn)性: 當(dāng)隱藏元素時(shí)，請(qǐng)考慮可訪問(wèn)性。display: none會(huì)從可訪問(wèn)性樹(shù)中移除元素，屏幕閱讀器將無(wú)法感知。如果希望元素在視覺(jué)上隱藏但對(duì)屏幕閱讀器仍然可用，可以考慮使用其他CSS技巧，如opacity: 0; visibility: hidden; 或?qū)⒃匾瞥鲆暱?。然而，?duì)于貨幣符號(hào)這種純視覺(jué)輔助元素，display: none通常是合適的。

總結(jié)

通過(guò)本教程，我們學(xué)習(xí)了如何使用JavaScript有效地處理頁(yè)面上多個(gè)具有相似結(jié)構(gòu)的元素。關(guān)鍵在于利用document.querySelectorAll()獲取所有目標(biāo)父元素，并通過(guò)forEach()方法對(duì)每個(gè)父元素進(jìn)行迭代。在迭代過(guò)程中，使用element.querySelector()在當(dāng)前父元素的作用域內(nèi)精確查找子元素，從而實(shí)現(xiàn)局部且獨(dú)立的條件判斷和樣式操作。遵循最佳實(shí)踐，如使用CSS類管理樣式，將使你的代碼更加健壯和易于維護(hù)。

以上就是使用JavaScript根據(jù)同級(jí)元素內(nèi)容控制元素顯示與隱藏的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！