以下是按照类别筛选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属性,可以根据实际需要进行更改。
上一篇:按照类别筛选产品问题。
下一篇:按照类别搜索产品