如果项目包含与链接文本相同的文本，则显示div

我有一个博客，从多个类别输出帖子，并希望能够根据类别过滤它们，同时留在页面上。例如，如果我点击标签2，我希望所有的帖子都显示标签2。由于在CMS中没有一种简单的方法来做到这一点，我想我会在显示类别的帖子中添加另一个字段，并使用jQuery查看是否有匹配并返回结果。

默认情况下，我想显示所有的帖子
点击"过滤器"后;(从tr-nav)我想只显示从该类别的帖子(从tr-category)。
如果tr-title和tr-category是相同的，那么只有这些帖子应该显示

有人知道一个简单的方法来处理这个吗?

我发现了以下代码片段，它根据类别自动排序，但我希望在单击时发生这种情况。我试过摆弄这个，但是什么都不能用。

任何帮助都将非常感激!

$(function() {
for (var i = 0; i < $('.tr-wrap .tr-category').length; i++) {
var name = $('.tr-wrap .tr-category').eq( i );
for (var d = 0; d < $('.tr-title').length; d++) {
var title = $('.tr-title').eq( d );
if ( title.text() == name.text()  ) {
var parent = name.closest('.tr-item');
var titleContain = title.closest('.tr-contain').find('.tr-list');
parent.clone(true, true).appendTo( titleContain );
}
}
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="tr-nav">
<a href="#"><div class="tr-title">All</div></a>
<a href="#"><div class="tr-title">Tag 1</div></a>
<a href="#"><div class="tr-title">Tag 2</div></a>
<a href="#"><div class="tr-title">Tag 3</div></a>
</div>
<div class="tr-wrap">
<div class="tr-list">
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category">Tag 3</div>
</div>
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category">Tag 2</div>
</div>
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category">Tag 3</div>
</div>
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category">Tag 1</div>
</div>
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category">Tag 2</div>
</div>
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category">Tag 3</div>
</div>
</div>  
</div>

您可以通过将tag name作为一个类添加到每个帖子中来过滤您的帖子。我希望这对你有帮助。

function filterPosts(tag) {
const postsList = document.querySelectorAll('.tr-item');
if (tag === 'all') {
postsList.forEach(post => {
post.classList.remove('hidden');
});
} else {
postsList.forEach(post => {
if (post.classList.contains(tag)) {
post.classList.remove('hidden');
} else {
post.classList.add('hidden');
}
});
}
}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="tr-nav">
<a href="#" onclick="filterPosts('all')">
<div class="tr-title ">All</div>
</a>
<a href="#" onclick="filterPosts('tag-1')">
<div class="tr-title">Tag 1</div>
</a>
<a href="#" onclick="filterPosts('tag-2')">
<div class="tr-title">Tag 2</div>
</a>
<a href="#" onclick="filterPosts('tag-3')">
<div class="tr-title ">Tag 3</div>
</a>
</div>
<div class="tr-wrap">
<div class="tr-list">
<div class="tr-item tag-3">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category">Tag 3</div>
</div>
<div class="tr-item tag-2">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category ">Tag 2</div>
</div>
<div class="tr-item tag-3">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category ">Tag 3</div>
</div>
<div class="tr-item  tag-1">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category">Tag 1</div>
</div>
<div class="tr-item tag-2">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category ">Tag 2</div>
</div>
<div class="tr-item tag-3">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category">Tag 3</div>
</div>
</div>
</div>
</body>
</html>

同样，你可以在不添加任何类的情况下使用这段JavaScript代码，但你应该确保tr-category元素中的文本与tr-title元素中的文本相同。

function filterPosts(tag) {
const postsList = document.querySelectorAll('.tr-item');
let tagName = tag.children[0].innerText;
tagName = tagName.toLowerCase();
if (tagName == 'all') {
for (let i = 0; i < postsList.length; i++) {
let postTag = postsList[i].lastChild.previousSibling.innerText;
postTag = postTag.toLowerCase();
for (let i = 0; i < postsList.length; i++) {
postsList[i].classList.remove('hidden');
}
}
} else {
for (let i = 0; i < postsList.length; i++) {
let postTag = postsList[i].lastChild.previousSibling.innerText;
postTag = postTag.toLowerCase();
if (postTag === tagName) {
postsList[i].classList.remove('hidden');
} else {
postsList[i].classList.add('hidden');
}
}
}
}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="tr-nav">
<a href="#" onclick="filterPosts(this)">
<div class="tr-title ">All</div>
</a>
<a href="#" onclick="filterPosts(this)">
<div class="tr-title">Tag 1</div>
</a>
<a href="#" onclick="filterPosts(this)">
<div class="tr-title">Tag 2</div>
</a>
<a href="#" onclick="filterPosts(this)">
<div class="tr-title ">Tag 3</div>
</a>
</div>
<div class="tr-wrap">
<div class="tr-list">
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<p>test</p>
<div class="tr-category">Tag 3</div>
</div>
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<p>test</p>
<div class="tr-category ">Tag 2</div>
</div>
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category ">Tag 3</div>
</div>
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<p>test</p>
<div class="tr-category">Tag 1</div>
</div>
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<p>test</p>
<div class="tr-category ">Tag 2</div>
</div>
<div class="tr-item">
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<div class="tr-category">Tag 3</div>
</div>
</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：