根据特定ID显示隐藏 [英] Show Hide based on specific ID

问题描述

我想显示基于id的某些li，例如::

I would like to show certain li based on id for example::

  <ul class="category-list">
    <li class="category-btn category-selected" id="a">
        <div>
            <span class="category-icon"></span>
            <h2 class=" category-text">
                All
            </h2>
        </div>
        <span class="arrow-icon"></span>
    </li>

    <li class="category-btn" id="b">
        <div>
            <span class="category-icon"></span>
            <h2 class=" category-text">
                Compat
            </h2>
        </div>
        <span class="arrow-icon"></span>
    </li>

    <li class="category-btn" id="c">
        <div>
            <span class="category-icon"></span>
            <h2 class=" category-text">
                Connect
            </h2>
        </div>
        <span class="arrow-icon"></span>
    </li>

    <li class="category-btn" id="d">
        <div>
            <span class="category-icon"></span>
            <h2 class=" category-text">
                Error
            </h2>
        </div>
        <span class="arrow-icon"></span>
    </li>

    <li class="category-btn" id="e">
        <div>
            <span class="category-icon"></span>
            <h2 class=" category-text">
                Setup
            </h2>
        </div>
        <span class="arrow-icon"></span>
    </li>

    <li class="category-btn" id="f">
        <div>
            <span class="category-icon"></span>
            <h2 class=" category-text">
                Maintenance
            </h2>
        </div>
        <span class="arrow-icon"></span>
    </li>

    <li class="category-btn" id="g">
        <div>
            <span class="category-icon"></span>
            <h2 class=" category-text">
                Comparison
            </h2>
        </div>
        <span class="arrow-icon"></span>
    </li>

    <li class="category-btn" id="h">
        <div>
            <span class="category-icon"></span>
            <h2 class=" category-text">
                Information
            </h2>
        </div>
        <span class="arrow-icon"></span>
    </li>

    <li class="category-btn" id="i">
        <div>
            <span class="category-icon"></span>
            <h2 class=" category-text">
               shooting
            </h2>
        </div>
        <span class="arrow-icon"></span>
    </li>

    <li class="category-btn" id="j">
        <div>
            <span class="category-icon"></span>
            <h2 class=" category-text">
                Warranty
            </h2>
        </div>
        <span class="arrow-icon"></span>
    </li>

</ul>

现在页面上仅加载3个< li> ，其中包含特定的 id ='b'， id ='e'， id ='f'，其余的都将被隐藏，并且在单击显示/隐藏"按钮时，应该全部显示.

Now on page load only 3 <li> with specific id = 'b', id = 'e', id = 'f' should be shown rest will be Hidden, and while clicking on show/hide button all should show up.

从以下站点获取参考: w3学校了解更多/更少

Took reference from :w3 school Read more/less

但是不确定如何在< li> 中使用一些随机ID来实现此功能

But Not sure how to Implement this in <li> with some random id

推荐答案

JS代码-

const liArr = document.getElementsByClassName("category-btn");
const liToHideArr = ["b", "e", "f"]; // or any li id here
document.addEventListener("DOMContentLoaded", showHideElements("hide"));

function showAll() {
  showHideElements("show");
}

function showHideElements(action) {
  Array.from(liArr).forEach((element) => {
    if (liToHideArr.includes(element.id)) {
      if (action === "hide") element.classList.add("hidden");
      else element.classList.remove("hidden");
    }
  });
}
document.getElementById("showAll").addEventListener("click", showAll);

CSS-

.hidden {
  display: none;
}

这篇关于根据特定ID显示隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！