javascript - 如何按主题标签过滤博客文章？

Question

我想按主题标签过滤博客文章。

这实际上只显示具有相同 id 的博客文章并将它们移动到页面顶部。

顶部还有一个按钮来显示所有内容。

我试过使用这个 w3 课程https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_portfolio_gallery_filter

但是因为它添加了 display:none, display: block 类，它会干扰博客文章本身。

以下是其中一篇博客文章的结构。

<div><!--Hide/Show based on what hashtag-->
    <div> <!--Blog Post-->
        <div> <!--Blog Content which also Hide/show-->
            <div>
                <!--blog content 1-->
            </div>
            <div>
                <!--blog content 2-->
            </div>
            <div>
                <!--blog content 3-->
            </div>
            <div><!--blog pagination--></div>
            <div><!--#Hashtag id--></div>
        </div>
    </div>
</div>

标签： javascriptjqueryhtmlcss

Answer 1

对于同一条船上的任何人。这是解决方案：

JS

$(document).ready(function () {
    $(".filter-id-1").click(function () {
        $(".id-2, .id-3").fadeOut(200);
        $(".id-1").fadeIn(200);
    });
    $(".filter-id-2").click(function () {
        $(".id-1, .id-3").fadeOut(200);
        $(".id-2").fadeIn(200);
    });
    $(".filter-id-3").click(function () {
        $(".id-1, .id-2").fadeOut(200);
        $(".id-3").fadeIn(200);
    });
    $(".filter-all").click(function () {
        $(".id-1, .id-2, .id-3").fadeIn(200);
    });
});

HTML

<a href="#" class="filter-all">All</a> <!--Button to filter all-->

<div class="id-1 all">
<div> <!--Blog Post--></div>
<a href="#" class="filter-id-1 id-1 all">Hashtag #id 1</a>
</div>

<div class="id-2 all">
<div> <!--Blog Post--></div>
<a href="#" class="filter-id-2 id-2 all">Hashtag #id 2</a>
</div>

<div class="id-3 all">
<div> <!--Blog Post--></div>
<a href="#" class="filter-id-3 id-3 all">Hashtag #id 3</a>
</div>