过滤 HTML 元素 Vanilla JS

【问题标题】：Filter HTML elements Vanilla JS过滤 HTML 元素 Vanilla JS
【发布时间】：2021-11-12 16:21:23
【问题描述】：

我正在尝试创建一个过滤器来过滤不同的产品，但到目前为止没有成功 我尝试了不同的方法，例如通过对每个过滤器使用 IF 来使用很长的方法并没有让它工作并且代码很大，尝试循环也无法做到

我试图在 HTML 中使用“数据”属性来标记项目似乎是最好的方法？

欢迎任何帮助

下面是代码

const buttons = document.querySelectorAll('.btn')
const products = document.querySelectorAll('.products')


buttons.forEach(function (button) {
    button.addEventListener('click', (event) => {
        event.preventDefault()
        /* active button */
        buttons.forEach((button) => {
            button.classList.remove('active')
        })
        button.className = 'active'

        products.forEach(product => {
            showProduct = button.textContent
            
            if (product.getAttribute('data-filter') == showProduct.toLowerCase()){
                product.style.display = 'block'
            } else {
                product.style.display = 'none'
            }
        })
    })
}) 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body class="bg-indigo-900 font-mono">
    <nav class="mt-4 mb-10 text-white">
        <div class="nav-bar">
            <ul class="flex flex-row justify-center items-center space-x-8">
                <li class=" transition transform duaration-100 hover:scale-110">
                    <a class="active btn filter-btn" href="#">All</a>
                </li>
                <li class="transition transform duaration-100 hover:scale-110">
                    <a class="btn filter-btn" href="#">Cake</a>
                </li>
                <li class="transition transform duaration-100 hover:scale-110">
                    <a class="btn filter-btn" href="#">Cookies</a>
                </li>
                <li class="transition transform duaration-100 hover:scale-110">
                    <a class="btn filter-btn" href="#">Donuts</a>
                </li>
                <li class="transition transform duaration-100 hover:scale-110">
                    <a class="btn filter-btn" href="#">Pudding</a>
                </li>
            </ul>
        </div>
    </nav>

    <main>
        <section class="container mx-auto flex flex-row justify-center items-center ">
            <div class="grid grid-flow-row grid-cols-4 grid-rows-4 gap-10 ">
                <!-- cakes -->
                <div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
                    <div class="w-full h-48">
                        <img data-filter='cake' src="https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
                    </div>
                    <div class="p-6">
                      <h5 class="text-lg font-medium">Card title</h5>
                      <p class="mt-2">
                        Some simple text that describes what's going on in this very simple card.
                      </p>
                      <div class="mt-4 flex">
                        <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
                      </div>
                    </div>
                  </div>

                <div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
                    <div class="w-full h-48">
                        <img data-filter='cake' src="https://images.pexels.com/photos/1070850/pexels-photo-1070850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
                    </div>
                    <div class="p-6">
                      <h5 class="text-lg font-medium">Card title</h5>
                      <p class="mt-2">
                        Some simple text that describes what's going on in this very simple card.
                      </p>
                      <div class="mt-4 flex">
                        <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
                      </div>
                    </div>
                  </div>
                  <!-- cookies -->
                <div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
                    <div class="w-full h-48">
                        <img data-filter='cookies' src="https://images.pexels.com/photos/890577/pexels-photo-890577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
                    </div>
                    <div class="p-6">
                      <h5 class="text-lg font-medium">Card title</h5>
                      <p class="mt-2">
                        Some simple text that describes what's going on in this very simple card.
                      </p>
                      <div class="mt-4 flex">
                        <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
                      </div>
                    </div>
                  </div>

                <div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
                    <div class="w-full h-48">
                        <img data-filter='cookies' src="https://images.pexels.com/photos/1020585/pexels-photo-1020585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
                    </div>
                    <div class="p-6">
                      <h5 class="text-lg font-medium">Card title</h5>
                      <p class="mt-2">
                        Some simple text that describes what's going on in this very simple card.
                      </p>
                      <div class="mt-4 flex">
                        <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
                      </div>
                    </div>
                  </div>
                  <!-- donuts -->
                <div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
                    <div class="w-full h-48">
                        <img data-filter='donuts' src="https://images.pexels.com/photos/2955820/pexels-photo-2955820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
                    </div>
                    <div class="p-6">
                      <h5 class="text-lg font-medium">Card title</h5>
                      <p class="mt-2">
                        Some simple text that describes what's going on in this very simple card.
                      </p>
                      <div class="mt-4 flex">
                        <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
                      </div>
                    </div>
                  </div>

                <div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
                    <div class="w-full h-48">
                        <img data-filter='donuts'  src="https://images.pexels.com/photos/3656118/pexels-photo-3656118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
                    </div>
                    <div class="p-6">
                      <h5 class="text-lg font-medium">Card title</h5>
                      <p class="mt-2">
                        Some simple text that describes what's going on in this very simple card.
                      </p>
                      <div class="mt-4 flex">
                        <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
                      </div>
                    </div>
                  </div>
                  <!-- pudding -->
                <div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
                    <div class="w-full h-48">
                        <img data-filter='pudding' src="https://images.pexels.com/photos/302468/pexels-photo-302468.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" class="products w-full h-full object-cover"/>
                    </div>
                    <div class="p-6">
                      <h5 class="text-lg font-medium">Card title</h5>
                      <p class="mt-2">
                        Some simple text that describes what's going on in this very simple card.
                      </p>
                      <div class="mt-4 flex">
                        <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
                      </div>
                    </div>
                  </div>

                <div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
                    <div class="w-full h-48">
                        <img data-filter='pudding' src="https://images.pexels.com/photos/3026801/pexels-photo-3026801.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
                    </div>
                    <div class="p-6">
                      <h5 class="text-lg font-medium">Card title</h5>
                      <p class="mt-2">
                        Some simple text that describes what's going on in this very simple card.
                      </p>
                      <div class="mt-4 flex">
                        <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
                      </div>
                    </div>
                  </div>
                  
            </div>
        </section>
    </main>

    <script src="/app.js"></script>
</body>

</html>

【问题讨论】：

    标签： javascript html filter


    【解决方案1】：

    因此，您似乎希望隐藏除了您按下的按钮之外的所有内容。

    1. 我会首先放置一个辅助类来隐藏我想要从 dom 中过滤掉的元素，使用 classList 来切换具有 remove() 和 add() 的类
    2. 我会将 dataset.filter 属性移动到父元素 .products 而不是使用图像作为参考并尝试向上移动 DOM 以定位父元素。
    3. 删除您的图像类并将其重命名为products-img，使其与产品父元素不同。
    4. 使用回调添加到您的 eventListener 以检查 targetBtn 值或 textContent 通过 forEach 循环和 if 语句运行它以处理 全部按钮，显示所有元素。
    5. else 我们对产品运行 forEach，首先隐藏所有元素，然后使用匹配我们的 dataset.filter 值检查它是否等于 e.target.textContent 按钮的条件。

    请看下面的例子：

    const buttons = document.querySelectorAll('.btn')
const products = document.querySelectorAll('.products')

function filterButtons(e) {
  let targetBtn = e.target.textContent.toLowerCase()
  targetBtn === 'all' ?
    products.forEach(p => {
      p.classList.contains('hide') ?
        p.classList.remove('hide') : null
    }) :
  products.forEach(p => {
    p.classList.add('hide')
    p.dataset.filter === targetBtn ?
      p.classList.remove('hide') : null
  })
}


buttons.forEach(function(button) {
  button.addEventListener('click', filterButtons)
})
    .hide {
  display: none;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body class="bg-indigo-900 font-mono">
  <nav class="mt-4 mb-10 text-white">
    <div class="nav-bar">
      <ul class="flex flex-row justify-center items-center space-x-8">
        <li class=" transition transform duaration-100 hover:scale-110">
          <a class="active btn filter-btn" href="#">All</a>
        </li>
        <li class="transition transform duaration-100 hover:scale-110">
          <a class="btn filter-btn" href="#">Cake</a>
        </li>
        <li class="transition transform duaration-100 hover:scale-110">
          <a class="btn filter-btn" href="#">Cookies</a>
        </li>
        <li class="transition transform duaration-100 hover:scale-110">
          <a class="btn filter-btn" href="#">Donuts</a>
        </li>
        <li class="transition transform duaration-100 hover:scale-110">
          <a class="btn filter-btn" href="#">Pudding</a>
        </li>
      </ul>
    </div>
  </nav>

  <main>
    <section class="container mx-auto flex flex-row justify-center items-center ">
      <div class="grid grid-flow-row grid-cols-4 grid-rows-4 gap-10 parent">
        <!-- cakes -->
        <div data-filter='cake' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
          <div class="w-full h-48">
            <img src="https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
          </div>
          <div class="p-6">
            <h5 class="text-lg font-medium">Card title</h5>
            <p class="mt-2">
              Some simple text that describes what's going on in this very simple card.
            </p>
            <div class="mt-4 flex">
              <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600">View Source</a>
            </div>
          </div>
        </div>

        <div data-filter='cake' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
          <div class="w-full h-48">
            <img src="https://images.pexels.com/photos/1070850/pexels-photo-1070850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
          </div>
          <div class="p-6">
            <h5 class="text-lg font-medium">Card title</h5>
            <p class="mt-2">
              Some simple text that describes what's going on in this very simple card.
            </p>
            <div class="mt-4 flex">
              <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600">View Source</a>
            </div>
          </div>
        </div>
        <!-- cookies -->
        <div data-filter='cookies' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
          <div class="w-full h-48">
            <img src="https://images.pexels.com/photos/890577/pexels-photo-890577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
          </div>
          <div class="p-6">
            <h5 class="text-lg font-medium">Card title</h5>
            <p class="mt-2">
              Some simple text that describes what's going on in this very simple card.
            </p>
            <div class="mt-4 flex">
              <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600">View Source</a>
            </div>
          </div>
        </div>

        <div data-filter='cookies' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
          <div class="w-full h-48">
            <img src="https://images.pexels.com/photos/1020585/pexels-photo-1020585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
          </div>
          <div class="p-6">
            <h5 class="text-lg font-medium">Card title</h5>
            <p class="mt-2">
              Some simple text that describes what's going on in this very simple card.
            </p>
            <div class="mt-4 flex">
              <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600">View Source</a>
            </div>
          </div>
        </div>
        <!-- donuts -->
        <div data-filter='donuts' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
          <div class="w-full h-48">
            <img src="https://images.pexels.com/photos/2955820/pexels-photo-2955820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
          </div>
          <div class="p-6">
            <h5 class="text-lg font-medium">Card title</h5>
            <p class="mt-2">
              Some simple text that describes what's going on in this very simple card.
            </p>
            <div class="mt-4 flex">
              <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600">View Source</a>
            </div>
          </div>
        </div>

        <div data-filter='donuts' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
          <div class="w-full h-48">
            <img src="https://images.pexels.com/photos/3656118/pexels-photo-3656118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
          </div>
          <div class="p-6">
            <h5 class="text-lg font-medium">Card title</h5>
            <p class="mt-2">
              Some simple text that describes what's going on in this very simple card.
            </p>
            <div class="mt-4 flex">
              <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600">View Source</a>
            </div>
          </div>
        </div>
        <!-- pudding -->
        <div data-filter='pudding' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
          <div class="w-full h-48">
            <img src="https://images.pexels.com/photos/302468/pexels-photo-302468.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" class="products-img w-full h-full object-cover" />
          </div>
          <div class="p-6">
            <h5 class="text-lg font-medium">Card title</h5>
            <p class="mt-2">
              Some simple text that describes what's going on in this very simple card.
            </p>
            <div class="mt-4 flex">
              <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600">View Source</a>
            </div>
          </div>
        </div>

        <div data-filter='pudding' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
          <div class="w-full h-48">
            <img src="https://images.pexels.com/photos/3026801/pexels-photo-3026801.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
          </div>
          <div class="p-6">
            <h5 class="text-lg font-medium">Card title</h5>
            <p class="mt-2">
              Some simple text that describes what's going on in this very simple card.
            </p>
            <div class="mt-4 flex">
              <a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600">View Source</a>
            </div>
          </div>
        </div>

      </div>
    </section>
  </main>

  <script src="/app.js"></script>
</body>

</html>

    【讨论】：

      猜你喜欢
      • 2021-04-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-11-08
      • 1970-01-01
      • 2020-03-14
      • 2019-10-18
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode