如果类名=== id，则删除类

Question

我正在做一份副菜。菜单有主类别和子类别。

我只想显示活动类别的子类别。

我试图通过向所有子类别元素添加一个类"d-none“(display: none)，然后从适当的子类别中删除"d-none”类来实现这一点。我通过... if (subSubCategoryArray[i].classList.contains === clicked.id)来确定这一点，但它不工作。

假设这是我的代码。console.log(clicked.id)返回正确的值，但是"d-none“类不会从相应的元素中删除。

任何帮助都是非常受欢迎的。谢谢

<div class="sub-main" id="one">
    <a href="main-1">Main Category One</a>
</div>
<div class="sub-sub one" id="one-one">
    <a href="main-1-1">Sub One One</a>
</div>
<div class="sub-sub one" id="one-two">
    <a href="main-1-2">Sub One Two</a>
</div>
<div class="sub-sub one" id="one-three">
    <a href="main-1-3">Sub One Three</a>
</div>
<div class="sub-main" id="two">
    <a href="main-2">Main Category Two</a>
</div>
<div class="sub-sub two" id="two-one">
    <a href="main-2-1">Sub Two One</a>
</div>
<div class="sub-sub two" id="two-two">
    <a href="main-2-2">Sub Two Two</a>
</div>
<div class="sub-main" id="three">
    <a href="main-3">Main Category Three</a>
</div>

function ActiveMain (clicked_id){
    for (let i = 0; i < mainSubCategoryArray.length; i++){
        mainSubCategoryArray[i].classList.remove("active");
    }
    var clicked = document.getElementById(clicked_id);
    clicked.classList.add("active");

    console.log(clicked);
    console.log(clicked.id);
    
    for (let i = 0; i < subSubCategoryArray.length; i++){
        subSubCategoryArray[i].classList.add("d-none");
        console.log(clicked.id);
        if (subSubCategoryArray[i].classList.contains === clicked.id){
            subSubCategoryArray[i].classList.remove("d-none");
        }
    }
}

Answer 1

您正在将作为函数的classList.contains与ID进行比较，而应执行以下操作：

subSubCategoryArray[i].classList.contains(clicked.id);