JS / jQuery-检查元素是否在数组中具有所有类

编程问答 2022-08-13

问题描述

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

我该怎么做？

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

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>

解决方法

假设您有类似的东西并且想要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';
   }
});
,

现在解决了这个问题：

更新：必须将过滤器从AND调整为OR。
为此，公认的答案是最有帮助的。
仍然认为这种方法适合我最初想要做的事情，
所以我会保留在这里，以防其他人发现它有帮助。

对于初始问题

“如何检查元素是否在数组中具有所有类”

使用jQuery，一个简单的解决方案是：

  1. 遍历类数组并将它们连接为字符串。
  2. 使用jQuery选择该字符串
  3. 仅返回匹配的元素

$('.filter-option').on('change',function (event) {
  const activeFilters = $('.filter-option:checked');
  let classString = "";
  
  if (activeFilters.length === 0) {
    $('.product').show();
  } else {
    $('.product').hide();
    activeFilters.each((index,filter) => {
      classString += "." + filter.id;
    });
    $(classString).show();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

提琴：https://jsfiddle.net/Chazlol/3zuaey0x/1/

,

使用<input type "radio">元素“单选按钮”而不是inpout type="checkbox">元素可能会更好，因为这些元素仅允许检查同名元素之一。这样，使元素可见或不可见的脚本非常简单：

const ul=document.querySelector('#product-list');
document.querySelector('.filter-box').onchange=ev=>{
  let siz=document.querySelector('[name=size]:checked');
  let col=document.querySelector('[name=colour]:checked');
  [...ul.children].filter(li=>
     li.style.display= siz&&li.classList.contains(siz.value)
                    && col&&li.classList.contains(col.value) ? 'block': 'none' 
  );
}
<div class="filter-box">
    <h3>Size</h3>
    <label><input type="radio" name="size" value="size-s">small</label>
    <label><input type="radio" name="size" value="size-m">medium</label>
    <label><input type="radio" name="size" value="size-l">large</label>
    <h3>Colour</h3>
    <label><input type="radio" name="colour" value="color-white">white</label>
    <label><input type="radio" name="colour" value="color-red">red</label>
    <label><input type="radio" name="colour" value="color-blue">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>

,

您可以结合使用Array.prototype.every()和JQuery .hasClass() 

const classList = ['a','b'];

function checkClassList($el,classList){
  return classList.every((c) => $el.hasClass(c));
}

console.log(checkClassList($("#id1"),classList))
console.log(checkClassList($("#id2"),classList))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="id1" class="a b"></ul>
<ul id="id2" class="a"></ul>

domjavascriptjqueryrequirejs