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

Question

我在页面上有一个项目（艺术家）列表，在此之上，我有按钮（类别）来过滤列表，我无法在我的Javascript中思考的是如何过滤一个项目，如果它位于多个类别中。这是我的JS：const buttons = document.querySelector("#buttons").childrenconst items = document.querySelector(".artists-container").childrenfor(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() {

  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>