JS功能隱藏博客文章

Question

我創建了一個博客網站，其中包含3個主要類別：投資，金錢和退休。 我添加了一個與每個主題類別相對應的類元素。 我正在嘗試創建JS函數，這些函數在單擊時會隱藏其他兩個類別（我正在這樣做是為了避免每個類別都有主頁）。 這是一個通過隱藏“投資”和“金錢”類別來顯示“退休”類別的功能：

    function showRetirement() {
        var abc = document.getElementsByClassName("Investing, Money");
        for (var abc2 = 0; abc2 < abc.length; abc2++) {
        abc[abc2].style.display = "none";
            }
        }

不用說這是行不通的。 方括號表示該功能“已定義但從未使用過”。 也說var abc“未定義'文檔'。”

這是我對函數的鏈接：

<div class="nav-link" onclick="showRetirement()">Retirement</div>

謝謝！！！

Answer 1

歡迎來到蘇丹。

getElementsByClassName不允許在一個調用中通過多個類名進行檢索。 相反，使用document.querySelectorAll()方法會更容易，該方法允許使用查詢選擇器從頁面中選擇項目。 一個查詢選擇器，用於選擇“ Investing或Money ”類的所有項目，如下所示： .Investing, .Money

附帶說明一下，此時括號編輯器中的警告可以忽略，該編輯器沒有意識到您是通過onClick=""處理程序調用此函數的，因此認為該函數未使用。

另一個注意事項是，通常在for循環中使用變量i ，其他程序員將更容易理解該變量的用途。

使用querySelectorAll的示例解決方案

function showRetirement() {
    var elements = document.querySelectorAll(".Investing, .Money");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = "none";
    }
}

在我們隱藏其他項目之后，也可能值得在此處顯示“ Retirement類的項目：

function showRetirement() {
    var elementsToHide = document.querySelectorAll(".Investing, .Money");
    for (var i = 0; i < elementsToHide.length; i++) {
        elementsToHide[i].style.display = "none";
    }

    var elementsToShow = document.querySelectorAll(".Retirement");
    for (var i = 0; i < elementsToShow.length; i++) {
        elementsToShow[i].style.display = "block";
    }
}

Answer 2

function showRetirement(){
 var ar_el;
 ar_el = document.getElementsByClassName("Investing");
 for (var i = 0; i < ar_el.length; i++)
  ar_el[i].style.display = "none";

 ar_el = document.getElementsByClassName("Money");
 for (var i = 0; i < ar_el.length; i++)
  ar_el[i].style.display = "none";

 ar_el = document.getElementsByClassName("Retirement");
 for (var i = 0; i < ar_el.length; i++)
  ar_el[i].style.display = "block";

}