如果 classname === id，则删除一个类

问题描述

我正在处理侧菜单。菜单有主要类别和子类别。

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

我试图通过向所有子类别元素添加一个类“d-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");
        }
    }
}

解决方法

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

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