如何使用 JavaScript 隱藏當錨點 href 屬性為空時的 span 元素？

在現代 Web 開發中，根據某些條件動態隱藏或顯示元素通常是必要的。一個常見的需求是，如果關聯的 <a>（錨點）元素具有空的 href 屬性，則隱藏 <span> 元素。此功能在處理動態生成的導航選單或連結時尤其有用。

在本文中，我們將探討如何使用 JavaScript 實現此行為。我們將深入探討兩種不同的方法：一種利用 JavaScript 事件偵聽器，另一種利用 CSS 選擇器。透過理解這兩種方法，您將能夠靈活地選擇最適合您的專案需求的方法。

因此，讓我們深入瞭解如何隱藏當 <a> 元素的 href 屬性為空時的 <span> 元素。

理解問題

在我們深入瞭解解決方案之前，讓我們先清楚地瞭解手頭的問題。如果關聯的 <a> 元素的 href 屬性為空，我們希望隱藏 <span> 元素。這意味著當用戶與網頁互動時，如果特定 <a> 元素沒有關聯的連結，則相應的 <span> 元素應被隱藏。

為了實現這一點，我們需要 −

  • 識別需要檢查的 <a> 元素。

  • 訪問每個 <a> 元素的 href 屬性。

  • 確定 href 屬性是否為空。

  • 根據結果隱藏或顯示相應的 <span> 元素。

接下來，我們將討論第一種技術：使用 JavaScript 事件偵聽器隱藏 <span> 元素。

技術 1：使用 JavaScript 事件偵聽器

在這種技術中，我們將使用 JavaScript 事件偵聽器來監控 <a> 元素的變化，並根據 href 屬性隱藏或顯示相應的 <span> 元素。

步驟

  • 使用 document.querySelectorAll('a') 選擇頁面上的所有 <a> 元素。

  • 使用迴圈遍歷選定的元素。

  • 為每個 <a> 元素附加一個點選事件偵聽器。

  • 在事件偵聽器回撥函式中，檢查被點選的 <a> 元素的 href 屬性是否為空 (href === '')。

  • 如果 href 為空，則透過將其 display 屬性設定為 none 來隱藏關聯的 <span> 元素。否則，透過將其 display 屬性設定為適當的值（例如，block 或 inline）來顯示 <span> 元素。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Hide Span on Empty Href</title>
   <style>
      /* Styles for demonstration purposes */
      .hidden {
         display: none;
      }
   </style>
</head>
<body>
   <a href="#">Link 1</a>
   <span>Associated Span 1</span>
   <br>
   <a href="">Link 2</a>
   <span>Associated Span 2</span>
   <br>
   <a href="https://example.com">Link 3</a>
   <span>Associated Span 3</span>   
   <script>
      // Select all <a> elements
      const links = document.querySelectorAll('a');
      
      // Attach event listener to each <a> element
      links.forEach((link) => {
         link.addEventListener('click', function(event) {
            // Check if href is empty
            if (link.href === '') {
               // Hide the associated <span> element
               link.nextElementSibling.style.display = 'none';
            } else {
               // Show the associated <span> element
               link.nextElementSibling.style.display = '';
            }
         });
      });
   </script>
</body>
</html>

在此示例中，我們有三個 <a> 元素及其對應的 <span> 元素。當用戶點選 <a> 元素時，如果 href 屬性為空，則關聯的 <span> 元素將被隱藏。否則，<span> 元素將顯示。

接下來，我們將探討第二種技術：使用 CSS 選擇器隱藏 <span> 元素。

技術 2：使用 CSS 選擇器

在這種技術中，我們將利用 CSS 選擇器來定位和隱藏 <span> 元素，具體取決於關聯的 <a> 元素的 href 屬性的條件。

步驟

  • 定義一個 CSS 選擇器，用於在關聯的 <a> 元素的 href 屬性為空時定位要隱藏的 <span> 元素。

  • 在 CSS 選擇器中使用 :empty 偽類來選擇 href 屬性為空的 <a> 元素。

  • 指定要隱藏選定 <span> 元素所需的 CSS 屬性。例如，您可以將 display 屬性設定為 none，或使用其他 CSS 屬性（如 visibility 或 opacity）來實現所需的隱藏效果。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Hide Span on Empty Href</title>
   <style>
      /* Styles for demonstration purposes */
      .hidden {
         display: none;
      }
      
      /* CSS selector to target the <span> elements */
      a[href=""]:empty + span {
         display: none;
      }
   </style>
</head>
<body>
   <a href="#">Link 1</a>
   <span>Associated Span 1</span>
   <br>
   <a href="">Link 2</a>
   <span>Associated Span 2</span>
   <br>
   <a href="https://example.com">Link 3</a>
   <span>Associated Span 3</span>
</body>
</html>

在此示例中，我們有三個 <a> 元素及其對應的 <span> 元素。透過使用 CSS 選擇器 a[href=""]:empty + span，我們定位緊跟 href 屬性為空的 <a> 元素後面的 <span> 元素。然後，我們將這些 <span> 元素的 display 屬性設定為 none 以隱藏它們。

在此示例中，我們有三個 <a> 元素及其對應的 <span> 元素。透過使用 CSS 選擇器 a[href=""]:empty + span，我們定位緊跟 href 屬性為空的 <a> 元素後面的 <span> 元素。然後，我們將這些 <span> 元素的 display 屬性設定為 none 以隱藏它們。

比較

本文中討論的兩種技術都提供了當關聯的 <a> 元素具有空的 href 屬性時隱藏 <span> 元素的解決方案。但是，它們在實現和使用場景方面有所不同。讓我們根據幾個方面對它們進行比較 −

複雜性和依賴性

  • JavaScript 事件偵聽器 − 此技術需要編寫 JavaScript 程式碼來為 <a> 元素附加事件偵聽器並操作關聯的 <span> 元素的可見性。它涉及更多程式碼並依賴於 JavaScript。

  • CSS 選擇器 − 此技術利用 CSS 選擇器根據 <a> 元素的 href 屬性的條件來定位和設定 <span> 元素的樣式。它純粹基於 CSS，不需要任何額外的 JavaScript 程式碼。

靈活性和動態性

  • JavaScript 事件偵聽器 − 使用 JavaScript，您可以更靈活地處理 DOM 中的動態更改。您可以動態附加和移除事件偵聽器，使其適用於 <a> 元素或其 href 屬性可能動態更改的場景。

  • CSS 選擇器 − CSS 選擇器是靜態應用的，並且不知道 DOM 中的動態更改。如果 <a> 元素或其 href 屬性動態更改，則 CSS 選擇器可能不會自動更新 <span> 元素的可見性。

瀏覽器支援

  • JavaScript 事件偵聽器 − JavaScript 事件偵聽器在現代瀏覽器中得到廣泛支援，並提供可靠的跨瀏覽器相容性。

  • CSS 選擇器 − CSS 選擇器得到現代瀏覽器的良好支援，但舊版瀏覽器可能對某些高階選擇器或偽類支援有限。請確保檢查目標受眾的相容性要求。

靈活性和動態性

  • JavaScript 事件偵聽器 − JavaScript 事件偵聽器涉及執行時程式碼執行，這可能會對效能造成輕微影響，尤其是在處理大量元素或頻繁的 DOM 更新時。

  • CSS 選擇器 − CSS 選擇器由瀏覽器高度最佳化，可以提供高效的元素選擇和樣式設定。與基於 JavaScript 的解決方案相比，它們通常提供更好的效能。

在為您的特定用例選擇合適的技術時，請考慮這些因素。

結論

在本文中，我們討論了當關聯的 <a> 元素具有空的 href 屬性時如何隱藏 <span> 元素。我們探討了兩種技術：使用 JavaScript 事件偵聽器和利用 CSS 選擇器。

透過使用 JavaScript 事件偵聽器，我們可以動態監控 <a> 元素的狀態，並根據其 href 屬性的條件隱藏關聯的 <span> 元素。這種方法提供了靈活性，尤其是在需要動態更新的場景中。

另一方面，CSS 選擇器提供了一種純 CSS 解決方案，利用 :empty 等選擇器直接定位和隱藏與空 href 屬性關聯的 <span> 元素。這種方法簡單輕便，不需要額外的 JavaScript 程式碼。

更新於: 2023年8月7日

2K+ 閱讀量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告