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";
            }
        }

不用说它不起作用。 Brackets称功能“已定义但从未使用过”。它还说没有定义var abc“'document'。”

这是我对该功能的链接：

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

谢谢！！！

Answer 1

欢迎来到SO Dan。

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";

}