使用复选框创建帖子类别过滤器可以通过以下步骤实现:
<div>
或<ul>
等元素。每个复选框都需要一个唯一的ID和一个关联的标签。<div id="category-filter">
<input type="checkbox" id="category1">
<label for="category1">类别1</label>
<input type="checkbox" id="category2">
<label for="category2">类别2</label>
<!-- 其他类别复选框 -->
</div>
// 获取所有复选框元素
const checkboxes = document.querySelectorAll('#category-filter input[type="checkbox"]');
// 监听复选框变化事件
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', filterPosts);
});
// 过滤帖子函数
function filterPosts() {
// 获取选中的复选框值
const selectedCategories = Array.from(checkboxes)
.filter(checkbox => checkbox.checked)
.map(checkbox => checkbox.id);
// 根据选中的类别过滤帖子
const filteredPosts = posts.filter(post => selectedCategories.includes(post.category));
// 更新帖子列表显示
renderPosts(filteredPosts);
}
#category-filter {
margin-bottom: 10px;
}
#category-filter input[type="checkbox"] {
margin-right: 5px;
}
.post {
/* 帖子样式 */
}
以上代码示例中,posts
是一个包含所有帖子的数组,每个帖子对象包含category
属性表示帖子的类别。filterPosts
函数根据选中的类别过滤帖子,并调用renderPosts
函数更新帖子列表的显示。
对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,无法提供相关链接。但腾讯云提供了丰富的云计算服务,可以通过访问腾讯云官方网站获取更多信息。
领取专属 10元无门槛券
手把手带您无忧上云