当前位置： 文江博客话题详情

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

发布于 2025-02-10 20:13:26 字数 2551 浏览 2 评论 0原文

我有一个博客，该博客从多个类别中输出帖子，并希望在留在页面上时根据类别过滤它们。例如，如果我单击标签2，我希望所有帖子都显示出标签2。 jQuery看看是否有匹配并返回结果。

  • 默认情况下，我想
  • 在单击“过滤器”（来自TR-NAV）之后显示所有帖子，我想仅显示该类别（来自TR类别）的帖子。
  • 如果tritle和tr类是相同的，那么只有那些帖子才能显示

任何人知道处理此问题的简单方法？

我找到了以下基于类别自动选择的片段，但是我希望在单击时发生这种情况。我已经尝试弄乱了这一点，但无法实现任何工作。

任何帮助将不胜感激！

$(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>

原文

I have a blog that outputs posts from multiple categories and want to be able to filter them based on category while staying on the page. For instance, if I click Tag 2 I want all posts to show up with Tag 2. Since there isn't an easy way to do this in the CMS I figured I would add another field to the post that displays the category, and use jQuery to see if there's a match and return the results.

  • By default I'd like to display all posts
  • After clicking a "filter" (from tr-nav) I'd like to only show posts from that category (from tr-category).
  • If tr-title and tr-category are the same then only those posts should show

Does anyone know of an easy way to handle this?

I've found the following snippet which auto sorts based on category, but I want this to happen on click. I've tried messing with this but can't get anything to work.

Any help would be greatly appreciated!

$(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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

孤凫 2025-02-17 20:13:27

另外，您可以在不添加任何类的情况下使用此JavaScript代码，但是您应该确保tr-category elements中的文本与tr-title elements中的文本相同。

  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>

Also, you can use this JavaScript code without adding any classes, but you should make sure the text in tr-category elements is the same as the text in tr-title elements.

  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>

回复 原文
留蓝 2025-02-17 20:13:26

您可以通过在每个帖子中添加标签名称作为类来过滤帖子。我希望这对你有帮助

        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>

You can filter your posts by adding the tag name as a class to each post. I hope this will help you

        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>

回复 原文
~没有更多了~

关于作者

眼眸里的那抹悲凉

暂无简介

文章
评论
826 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文