第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用Javascript過濾內(nèi)容,但是當內(nèi)容位于多個“類別”中時如何過濾內(nèi)容

使用Javascript過濾內(nèi)容,但是當內(nèi)容位于多個“類別”中時如何過濾內(nèi)容

蕪湖不蕪 2022-09-02 21:21:57
我在頁面上有一個項目(藝術家)列表,在此之上,我有按鈕(類別)來過濾列表,我無法在我的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>任何幫助將不勝感激。
查看完整描述

2 回答

?
牛魔王的故事

TA貢獻1830條經(jīng)驗 獲得超3個贊

請參閱我的示例,我設置了與目標相等的最小變化,并略微減少了代碼:


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


查看完整回答
反對 回復 2022-09-02
?
SMILET

TA貢獻1796條經(jīng)驗 獲得超4個贊

我認為最簡單的解決方案是使用 檢查目標是否在屬性列表中。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>


查看完整回答
反對 回復 2022-09-02
  • 2 回答
  • 0 關注
  • 88 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號