以下是按照类别筛选div的示例代码:
HTML代码:
Item 1
Item 2
Item 3
Item 4
Item 5
JavaScript代码:
// 获取所有的div元素
const divs = document.querySelectorAll('.item');
// 获取选中的类别
const selectedCategory = 'category1';
// 遍历div元素,筛选出符合选中类别的元素并显示
divs.forEach(div => {
if (div.getAttribute('data-category') === selectedCategory) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
});
这段代码首先使用document.querySelectorAll('.item')获取所有具有item类的div元素,并将其存储在divs变量中。然后,使用selectedCategory变量来指定选中的类别。
接下来,使用divs.forEach()方法遍历所有的div元素。对于每个div元素,使用getAttribute('data-category')方法获取其data-category属性的值,并与选中的类别进行比较。如果相等,则将其显示(设置display为block),否则隐藏(设置display为none)。
注意,data-category是一个自定义的HTML属性,可以根据实际需要进行更改。
上一篇:按照类别筛选产品问题。
下一篇:按照类别搜索产品