如何过滤页面上的内容卡片?

Question

我创建了一篇博客文章，分为三个类别:(数字营销类别，技巧和建议类别，加密货币类别)

我想做的是过滤它。

例如，如果我想查看数字营销类别的所有文章，我将点击此按钮显示所有数字营销类别并隐藏其他类别。

这是我的代码示例。问题是我的过滤器坏了。有什么问题吗?

我试图添加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>

Answer 1

在代码中，将Filter All按钮的data-category属性定义为data-category="filter-all"。因此，当点击All按钮时，JavaScript代码中的selectedCategory变量将被设置为"filter-all"

但是，在按类别过滤文章的if语句中，该语句与"all"进行比较，这与"filter-all"不匹配，因此不会显示任何文章。

这是你的更正代码:

if (selectedCategory === 'filter-all' || selectedCategory === cardCategory) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}

此外，您提供的JS在最后缺少});，不确定这是否只是您不小心错过了那行思想:)

Answer 2

已经由@Beau解决了。

在这里声明按钮filter-all<button data-category="filter-all">All</button>

所以在你的情况下if (selectedCategory === 'all'是错误的，应该是if (selectedCategory === 'filter-all'，就像@Beau说的。

我只是添加了一个片段以防万一。

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');
selectedCategory === 'filter-all' || selectedCategory === cardCategory ? card.style.display = 'block' : 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">
Digital Marketing Category
</div>
<!-- Article Card -->
<div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="tips-and-advice-category">
Tips and Advice Category
</div>
<!-- Article Card -->
<div class="col-lg-6 col-md-6 d-md-flex article-card" data-category="cryptocurrency-category">
Crypto Currency Category
</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>