时间戳

首页 > 解决方案 > 按类过滤 div

javascript - 按类过滤 div

问题描述

我正在尝试创建一个函数，当您单击一个按钮时，它会返回一个无显示的附加显示。当您单击按钮时，它基本上会过滤带有类名的 div。我使用 while/do 循环按类名遍历所有元素。在浏览器控制台日志中它告诉我

“无法读取未定义的属性‘样式’”。

有谁知道可能是什么问题？

    <div class="container"> 
      <h1 id="title">World's Top suppply chains</h1>
        <div class="options">
          <button id="allbtn">All</button>
          <button>Drinks</button>
          <button>Clothing</button>
          <button>Cars</button>
          <button id="fast-food-btn">Fast Food</button>
    </div>

    <div class="stores">
        <div class="store">
            <img src="images/adidas.png">
            <h3>Adidas</h3>
            <p class="industry">Clothing</p>
        </div>



        <div class="store">
            <img src="images/corona.png">
            <h3>Corona</h3>
            <p class="industry">Drinks</p>
        </div>


        <div class="store">
            <img src="images/nike.jpg">
            <h3>Nike</h3>
            <p class="industry">Clothing</p>
        </div>

        <div class="store">
            <img src="images/lambo.png">
            <h3>Lamborghini</h3>
            <p class="industry">Cars</p>
        </div>

        <div class="store">
            <img src="images/smirnoff.png">
            <h3>Smirnoff</h3>
            <p class="industry">Drinks</p>
        </div>



        <div class="store">
            <img src="images/pepsi.jpg">
            <h3>Pepsi</h3>
            <p class="industry">Drinks</p>
        </div>


        <div class="store">
            <img src="images/gucci.png">
            <h3>Gucci</h3>
            <p class="industry">Clothing</p>
        </div>

          <div class="store">
            <img src="images/heineken.jpg">
            <h3>Heineken</h3>
            <p class="industry">Drinks</p>
        </div>



        <div class="store">
            <img src="images/lacoste.png">
            <h3>Lacoste</h3>
            <p class="industry">Clothing</p>
        </div>


        <div class="store">
            <img src="images/ferrari.png">
            <h3>Ferrari</h3>
            <p class="industry">Cars</p>
        </div>

      <div class="store">
            <img src="images/pizzahut.png">
            <h3>Pizza Hut</h3>
            <p class="industry">Fast Food</p>
        </div>

      <div class="store">
            <img src="images/cocacola.png">
            <h3>Coca Cola</h3>
            <p class="industry">Drinks</p>
        </div>

        <div class="store">
            <img src="images/mc.png">
            <h3>Mc Donalds</h3>
            <p class="industry">Fast Food</p>
        </div>      
    </div>
</div>


<script>
    const industry = document.getElementsByClassName(".industry");
    const fastFood = document.getElementById("fast-food-btn"); 

    allbtn.addEventListener("click", filter);

    function filter(){

        const card = industry.parentElement; 

    do{
         card.style.display = "none";
    }
        while(industry.innerHTML === "Fast Food");
    }

</script>

标签： javascripthtmlclassfilter

解决方案

第一个问题是使用getElementsByClassName. 其次getElementsByClassName返回一个没有名为的属性的HTMLCollectionparent。

结果是这样的：

function filter() {
    const industries = document.getElementsByClassName("industry");
    for (let industry of industries) {
        industry.style.display = "none";
    }
}

此外，看起来该变量fastFood未使用并且该变量allbtn未定义。我认为它应该是这样的：

const allbtn = document.getElementById("allbtn");

放在一起，这应该可以解决您的问题：

<script>
    function filter() {
        const industries = document.getElementsByClassName("industry");
        for (let industry of industries) {
            industry.style.display = "none";
        }
    }
    const allbtn = document.getElementById("allbtn");
    allbtn.addEventListener("click", filter);
</script>

推荐阅读