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

欢迎来到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";

}

JS功能隐藏博客文章

2 个答案: