使用 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

看我的例子，我在 equals 中設置了很少的變化，並稍微減少了代碼：

const buttons = Array.from(document.querySelector("#buttons").children)
const items = Array.from(document.querySelector(".artists-container").children)

const onClick = function() {
  buttons.forEach((button)=>{ button.classList.remove("active") })
  this.classList.add("active")
  const target = this.getAttribute("data-target")

  items.forEach((item)=>{ item.style.display="none" })
  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

我認為最簡單的解決方案是使用includes檢查目標是否在屬性列表中。

 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() { buttons.forEach(button => button.classList.remove("active")) this.classList.add("active") const target = this.getAttribute("data-target") items.forEach(item => { let display = target === "artists"? "block": "none" if (item.getAttribute("data-discipline").includes(target)) { display = "block" } item.style.display = display; }); }); }

 <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 3</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> </div> </section>