我写了一个博客，有三个类别：（数字营销类别、提示和建议类别、加密货币类别）
我想做的是过滤它。
例如，如果我想看到所有的文章为数字营销类别，我会点击这个按钮，以显示所有的数字营销类别和隐藏其他类别。
下面是我的代码示例。问题是我的过滤器不工作。有什么问题吗？
我试图添加JavaScript使其工作，但仍然没有工作。有什么问题吗？
document.addEventListener("DOMContentLoaded", () => {
"use strict";
/**
* Article Category Filter
*/
const filterButtons = document.querySelectorAll('.blog-filters button');
const articleCards = document.querySelectorAll('.article-card');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
const selectedCategory = button.getAttribute('data-category');
articleCards.forEach(card => {
const cardCategory = card.getAttribute('data-category');
if (selectedCategory === 'all' || selectedCategory === cardCategory) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
});
});
}); // this line added by community<section id="blog" class="blog">
<div class="row">
<div class="col-md-8">
<div class="posts-list">
<div class="row">
<div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="digital-marketing-category">
Blog Card
</div>
<!-- Article Card -->
<div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="tips-and-advice-category">
Blog Card
</div>
<!-- Article Card -->
<div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="cryptocurrency-category">
Blog Card
</div>
<!-- Article Card -->
</div>
</div>
</div>
<div class="col-md-4">
<div class="sidebar">
<h3 class="sidebar-title">Article Categories</h3>
<div class="blog-filters">
<button data-category="filter-all">All</button>
<button data-category="digital-marketing-category">Digital Marketing</button>
<button data-category="tips-and-advice-category">Tips & Advice</button>
<button data-category="cryptocurrency-category">Cryptocurrency</button>
</div>
</div>
</div>
</div>
</section>
2条答案
按热度按时间relj7zay1#
在代码中，您将“全部筛选”按钮的
data-category属性定义为data-category="filter-all"。因此，当单击All按钮时，JavaScript代码中的selectedCategory变量将被设置为“filter-all”。但是，在if语句中，文章是按类别过滤的，该语句与“all”进行比较，而“all”与“filter-all”不匹配，因此不会显示任何文章。
下面是你的修正代码：
此外，你提供的JS在最后缺少了一个
});，不确定这是否只是你不小心遗漏了那一行：）4jb9z9bj2#
已经通过@Beau解决。
你在这里声明你的button filter-all
<button data-category="filter-all">All</button>所以在你的条件下，
if (selectedCategory === 'all'是错误的，它应该是if (selectedCategory === 'filter-all'，正如@Beau所说的。我只是添加片段以防万一。