[英]Checkbox and Filtering Items with JS
I'm trying to build a set of filters using checkboxes. 我正在尝试使用复选框构建一组过滤器。
For example, I have: 例如,我有:
and want to be able to filter based on the color AND the shape. 并希望能够根据颜色和形状进行过滤。 I'm having difficulty.
我有困难。
If you run the code in this post, you'll see that my .querySelector() method is not pulling in all the elements with the '.red' class. 如果运行本文中的代码,您将看到我的.querySelector()方法未提取'.red'类的所有元素。 It's only altering the first element with that class name, not every element with the class name.
它只是更改具有该类名称的第一个元素,而不是更改具有该类名称的每个元素。 If I use the .querySelectorAll() method I also have no luck.
如果我使用.querySelectorAll()方法,我也没有运气。
My desired outcome is checkboxes that are "red only", "blue only", "circles only", and "squares only" and that can have MORE THAN ONE filter active at a time. 我希望得到的结果是“仅红色”,“仅蓝色”,“仅圆形”和“仅正方形”复选框,并且一次可以激活多个过滤器。
Any help is appreciated. 任何帮助表示赞赏。
const allRedItems = document.querySelector(".red"); const checkBox = document.querySelector('#hide'); checkBox.addEventListener('change', function(e){ if (hide.checked){allRedItems.style.display = "none";} else { allRedItems.style.display = "inline-block"; } });
div { height:100px; width:100px; border:1px solid #ccc; display:inline-block; margin:2rem; } .red { background-color:red; } .blue { background-color:blue; } .square { border-radius:5px; } .circle { border-radius:50%; }
<div class="red circle"></div> <div class="red square"></div> <div class="blue circle"></div> <div class="blue square"></div> <br> <input type="checkbox" id="hide"> <label for="hide">Hide All Red Elements</label>
Documentation on querySelector
有关
querySelector
文档
returns the first Element within the document that matches the specified selector
返回文档中与指定选择器匹配的第一个Element
The function you are looking for is querySelectorAll
您正在寻找的功能是
querySelectorAll
The Element method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
Element方法querySelectorAll()返回一个静态(非实时)NodeList,它表示与指定选择器组匹配的文档元素的列表。
Because it will return an array of elements rather than a single element, make sure you iterate through the array. 因为它将返回元素数组而不是单个元素,所以请确保遍历该数组。
const allRedItems = document.querySelectorAll(".red"); const checkBox = document.querySelector('#hide'); checkBox.addEventListener('change', function(e){ allRedItems.forEach( function(item) { if (hide.checked){ item.style.display = "none"; } else { item.style.display = "inline-block"; } }); });
div { height:100px; width:100px; border:1px solid #ccc; display:inline-block; margin:2rem; } .red { background-color:red; } .blue { background-color:blue; } .square { border-radius:5px; } .circle { border-radius:50%; }
<div class="red circle"></div> <div class="red square"></div> <div class="blue circle"></div> <div class="blue square"></div> <br> <input type="checkbox" id="hide"> <label for="hide">Hide All Red Elements</label>
As a final note, you should be able to build a function to create the query string needed for querying, based on the selected boxes. 最后一点,您应该能够基于选定的框构建一个函数来创建查询所需的查询字符串。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.