Question

我想按主题标签过滤博客帖子。

有效地仅显示具有相同ID的博客帖子，并将其移到页面顶部。

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

我已经尝试过本w3课程https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_portfolio_gallery_filter

但是，因为它添加了display：none和display：块类，所以它干扰了博客帖子本身。

下面是各个博客文章之一的结构。

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

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>

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

1 个答案: