JavaScript实现网站卡片组件的数组内容按类型筛选展示功能

我来帮你搞定这个筛选功能！你已经找对方向了，只需要把筛选逻辑和渲染逻辑整合起来，就能写出简洁易维护的代码，不用为每个分类单独写函数。咱们一步步来优化：

先梳理现有代码的小问题 #

1. 初始化事件绑定错误：document.addEventListener("load", makeCards())里的makeCards()会直接执行函数，而不是等页面加载完成后执行，应该改成DOMContentLoaded事件，并且只传函数引用。
2. HTML里的label关联错误：<label for="articles">对应的input id是A，这会导致点击label无法触发复选框，需要把input的id和label的for属性对应上。
3. 筛选逻辑和渲染逻辑分离不清晰：原代码里的filtered对象其实没必要，我们可以直接根据选中的复选框动态过滤原数组。

修改后的完整代码 #

HTML部分（修正label关联） #

<body>
 <h2 class="articles-title">Resources Library</h2>
 <div class="articles-container">
 <div id="filterArticles">
 <h2 class="filter__title">Filter Resources</h2>
 <div class="filter-types">
 <h3 class="filter-types__title">Types</h3>
 <ul class="filter-types__list" id="filterList">
 <input id="article-checkbox" class="checkbox" type="checkbox" name="articles" value="Article">
 <label for="article-checkbox">Articles</label><br>
 <input id="video-checkbox" class="checkbox" type="checkbox" name="video" value="Video">
 <label for="video-checkbox">Video</label><br>
 </ul>
 </div>
 </div>
 <div id="newsArticles">
 <div id="data-list" class="data-list">
 </div>
 </div>
 </div>
 <script src="./index.js"></script>
</body>

JavaScript部分（整合筛选与渲染） #

const data = [
 { category: "Video", title: "Video Title 1" },
 { category: "Video", title: "Video Title 2" },
 { category: "Video", title: "Video Title 3" },
 { category: "Article", title: "Article 1" },
 { category: "Article", title: "Article 2" },
 { category: "Article", title: "Article 3" },
];

// 通用渲染函数：根据传入的数组生成卡片
function renderCards(cardsData) {
 let cardsHtml = '';
 cardsData.forEach(item => {
 cardsHtml += `
 <div class="card">
 <h4 class="news-card__type">${item.category}</h4>
 <h3 class="news-card__title">${item.title}</h3>
 </div>
 `;
 });
 document.getElementById("data-list").innerHTML = cardsHtml;
}

// 获取选中的分类并筛选数据
function filterAndRender() {
 // 获取所有被选中的复选框的value
 const selectedCategories = Array.from(document.querySelectorAll('.checkbox:checked'))
 .map(checkbox => checkbox.value);

 // 如果没有选中任何分类，展示全部；否则筛选对应分类
 const filteredData = selectedCategories.length 
 ? data.filter(item => selectedCategories.includes(item.category))
 : data;

 // 渲染筛选后的内容
 renderCards(filteredData);
}

// 页面加载完成后渲染全部内容
document.addEventListener("DOMContentLoaded", () => {
 renderCards(data);
 // 给所有复选框绑定change事件，触发筛选
 document.querySelectorAll('.checkbox').forEach(checkbox => {
 checkbox.addEventListener('change', filterAndRender);
 });
});

关键逻辑解释 #

1. 通用渲染函数：renderCards接收一个数组，动态生成卡片HTML，不管是全部数据还是筛选后的数据，都用这个函数渲染，避免重复代码。
2. 动态筛选逻辑：filterAndRender函数会自动获取所有被选中的复选框的值，然后用Array.includes()判断数据项的分类是否在选中列表中，实现筛选。
3. 事件绑定优化：一次性给所有复选框绑定change事件，以后新增分类只需要在HTML里加对应的复选框，JS代码完全不用改，扩展性极强。

这样你就能实现勾选任意复选框（支持多选哦！）来展示对应分类的卡片，代码简洁易维护，完全不用为每个分类单独写函数~

内容的提问来源于stack exchange，提问作者fibbz