时间戳

首页 > 解决方案 > JS/jQuery - 检查元素是否包含数组中的所有类

javascript - JS/jQuery - 检查元素是否包含数组中的所有类

问题描述

我有一个<ul>项目
然后我有一组要过滤的类。
现在我想遍历所有<li>并仅显示包含数组中所有类的项并隐藏所有其他项。

我怎样才能做到这一点？

到目前为止的代码（未经测试）：

JS

define([
    "jquery"
], function($){
    "use strict";

    function main(config, element) {

        $('.filter-option').on('change', function (event) {

            const activeFilters = $('.filter-option:checked');

            if (!activeFilters) {
                $('.product').forEach(function(item) {
                    item.show();
                });
            } else {
                $('.product').forEach(function(item) {
                    //if item has all classes from activeFilters id's show else hide
                });
            }
        });
    }
    return main;
});

HTML

<div class="filter-box">
    <h3>Size</h3>
    <input type="checkbox" class="filter-option" id="size-s" name="size-s">
    <label for="size-s" class="filter-option-label">Small</label>
    <input type="checkbox" class="filter-option" id="size-m" name="size-m">
    <label for="size-m" class="filter-option-label">Medium</label>
    <input type="checkbox" class="filter-option" id="size-l" name="size-l">
    <label for="size-l" class="filter-option-label">Large</label>
    <h3>Colour</h3>
    <input type="checkbox" class="filter-option" id="color-white" name="color-white">
    <label for="color-white" class="filter-option-label">White</label>
    <input type="checkbox" class="filter-option" id="color-red" name="color-red">
    <label for="color-red" class="filter-option-label">Red</label>
    <input type="checkbox" class="filter-option" id="color-blue" name="color-blue">
    <label for="color-blue" class="filter-option-label">Blue</label>
</div>
<ul id="product-list">
    <li class="product color-red size-l">Red Large</li>
    <li class="product color-red size-m">Red Medium</li>
    <li class="product color-red size-s">Red Small</li>
    <li class="product color-blue size-l">Blue Large</li>
    <li class="product color-blue size-m">Blue Medium</li>
    <li class="product color-blue size-s">Blue Small</li>
    <li class="product color-white size-l">White Large</li>
    <li class="product color-white size-m">White Medium</li>
    <li class="product color-white size-s">White Small</li>
</ul>

标签： javascriptjquerydomrequirejs

解决方案

假设你有这样的东西并想要一个 VanillaJS 解决方案：

<div id="list-container">
    <ul>
        <li class="example">One</li>
        <li class="example another-class">Two</li>
        <li class="example">Three</li>
        <li class="example">Four</li>
        <li class="example">Five</li>
    </ul>
</div>

您可以迭代<li>元素并检查类，如下所示：

// Required classes array
let reqClasses = ['example', 'another-class'];

// Function to check if the element has the required classes
const hasClasses = (item) => {
   var s = true;
   
   reqClasses.forEach((classname) => {
      if (!item.classList.contains(classname) && s) {
         s = false;
      }
   });
  
   return s;
}

// We get the <li> elements
let list = document
   .getElementById("list-container")
   .querySelectorAll('li');

// We call the function on each element and toggle visibility depending on the return
list.forEach((item) => {
   if (!hasClasses(item)) {
      item.style.display = 'none';
   }
});

推荐阅读