Question

我正在尝试创建一个函数，当您单击按钮时，该函数将不显示任何内容。当您单击按钮时，它基本上用类名过滤div。我使用了while / do循环按类名浏览所有元素。在浏览器控制台日志中，它告诉我

“无法读取未定义的属性'style'。”

有人知道这可能是什么问题吗？

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

Answer 1

第一个问题是，使用getElementsByClassName时不需要在类前面加点。其次，getElementsByClassName返回一个HTMLCollection，它没有名为parent的属性。

结果如下：

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>

按类别过滤div

1 个答案: