javascript - 如何使用 Javascript 根据元素内容更改 css 样式

Question

在下面的代码中，我想隐藏任何不包含特定内容的 li 标签。例如，隐藏任何不包含“ALL”或“LOGO”文本内容的li标签，如下图。

<ul>
    <li class="filterTag">
        <span><a href="~">ALL</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">GUIDES</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">LOGO</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">ICON</a></span>
    </li>
 </ul>

我知道下面的 css 隐藏了 li:

<li style="display:none;">

但是，我希望有人可以帮助搜索 li 内容的 Javascript 函数，找到匹配值，然后转换 class="filterTag"到 style="display:none;"。

以下 JS 代码对我不起作用，但是它来自另一个示例，不确定是否需要所有代码:

var listLi=document.getElementsByTagName("li").getElementsByClassName('filterTag');
for(var i=0;i<listLi.length;i++) {
    var listLink = listLi[i].getElementsByTagName("a");
    for(var j=0;i<listLink .length;i++) {
        if(listLink [j].innerHTML!==('ALL' || 'LOGO'))
            listLink [j].style.display="none";
    }
}

请注意，我还添加了额外的过滤器:

.getElementsByClassName('filterTag') 因为页面上还有其他 li。

请注意我是否需要添加额外的内容:

.getElementsByTagName("a");?

Answer 1

最好在 CSS 中分离样式而不是编写内联样式。所以只需添加一个类(在本例中 fancy，根据您的需要进行更改)为了说明而不是隐藏，我添加了一个 background-color: orange;

请仔细阅读代码中的注释

var needles = ["ALL", "LOGO"]; // define the needles you need to find
var filterTags = document.querySelectorAll('.filterTag'); // get all filterTags
filterTags.forEach(function(filterTag){ // iterate over all filterTags
    if(needles.includes(filterTag.textContent.trim())) { // here the magic happens:
        // it compares if filterTag content is in the array of needles
        // if so we add the class name fancy 
        filterTag.classList.add('fancy');
        // instead of the above line you could do:
        // filterTag.style.display = "none";
    }
});

.fancy {
    /* change the style to display none instead of background-color */
    /* display: none; */
    background-color: orange;
}

<ul>
    <li class="filterTag">
        <span><a href="~">ALL</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">GUIDES</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">LOGO</a></span>
    </li>
    <li class="filterTag">
        <span><a href="~">ICON</a></span>
    </li>
 </ul>