使用Javascript过滤内容，但是当内容位于多个“类别”中时如何过滤内容

Question

我在页面上有一个项目（艺术家）列表，在此之上，我有按钮（类别）来过滤列表，我无法在我的Javascript中思考的是如何过滤一个项目，如果它位于多个类别中。

这是我的JS：

const buttons = document.querySelector("#buttons").children

const items = document.querySelector(".artists-container").children

for(let i=0; i<buttons.length; i++) {

    buttons[i].addEventListener("click", function(){

        for(let j=0; j<buttons.length; j++){

            buttons[j].classList.remove("active")

        }

        this.classList.add("active")

        const target = this.getAttribute("data-target")

        for(let k=0; k<items.length; k++){

            items[k].style.display="none"

            if(items[k].getAttribute("data-discipline")==target){

                items[k].style.display="block"

            }

            if(target=="artists"){

                items[k].style.display="block"

            }

        }

    })

}

如果它有帮助，这里也是我的HTML：

<section class="artists">

    <div class="filter-btn">

        <ul id="buttons">

            <li class="active" data-target="artists">All</li>

            <li data-target="category1">Category 1</li>

            <li data-target="category2">Category 2</li>

            <li data-target="category3">Category 2</li>

        </ul>

    </div>

    <div class="artists-container">

        <article data-discipline="category1 category2">

            <a href="#">

                <div class="artist-details">

                    <p>Category 1, Category 2</p>

                    <h5>I appear in two categories</h5>

                </div>

            </a>

        </article>

        <article data-discipline="category3">

            <a href="#">     

                <div class="artist-details">

                    <p>Category 3</p>

                    <h5>I appear in one category</h5>

                </div>

            </a>

        </article>

    </section>

任何帮助将不胜感激。

Answer 1

请参阅我的示例，我设置了与目标相等的最小变化，并略微减少了代码：const buttons = Array.from(document.querySelector("#buttons").children)const items = Array.from(document.querySelector(".artists-container").children)const onClick = function() {&nbsp; buttons.forEach((button)=>{ button.classList.remove("active") })&nbsp; this.classList.add("active")&nbsp; const target = this.getAttribute("data-target")&nbsp; items.forEach((item)=>{ item.style.display="none" })&nbsp; items.filter(item=>item.getAttribute("data-discipline").indexOf(target)>=0 || target=="artists").forEach((item)=>{item.style.display="block"})}buttons.forEach((button)=>{ button.addEventListener("click",onClick) })在操场上查看完整示例：https://jsfiddle.net/denisstukalov/uz5qeoLy/9/#&togetherjs=LpfzceeTVL

Answer 2

我认为最简单的解决方案是使用 检查目标是否在属性列表中。includesconst buttons = [...document.querySelector("#buttons").children]const items = [...document.querySelector(".artists-container").children]for (let i = 0; i < buttons.length; i++) {&nbsp; buttons[i].addEventListener("click", function() {&nbsp; &nbsp; buttons.forEach(button => button.classList.remove("active"))&nbsp; &nbsp; this.classList.add("active")&nbsp; &nbsp; const target = this.getAttribute("data-target")&nbsp; &nbsp; items.forEach(item => {&nbsp; &nbsp; &nbsp; let display = target === "artists" ? "block" : "none"&nbsp; &nbsp; &nbsp; if (item.getAttribute("data-discipline").includes(target)) {&nbsp; &nbsp; &nbsp; &nbsp; display = "block"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; item.style.display = display;&nbsp; &nbsp; });&nbsp; });}<section class="artists">&nbsp; <div class="filter-btn">&nbsp; &nbsp; <ul id="buttons">&nbsp; &nbsp; &nbsp; <li class="active" data-target="artists">All</li>&nbsp; &nbsp; &nbsp; <li data-target="category1">Category 1</li>&nbsp; &nbsp; &nbsp; <li data-target="category2">Category 2</li>&nbsp; &nbsp; &nbsp; <li data-target="category3">Category 3</li>&nbsp; &nbsp; </ul>&nbsp; </div>&nbsp; <div class="artists-container">&nbsp; &nbsp; <article data-discipline="category1 category2">&nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; <div class="artist-details">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Category 1, Category 2</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5>I appear in two categories</h5>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </article>&nbsp; &nbsp; <article data-discipline="category3">&nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; <div class="artist-details">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Category 3</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5>I appear in one category</h5>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </article>&nbsp; </div></section>