javascript - jQuery を使用したカテゴリのフィルタリング

Question

こんにちは、私は学校向けのプロジェクトを行っています。コーディングのフロントエンドのみを行っており、要件の 1 つはブログ カテゴリを jQuery でフィルタリングすることです。通常、私は PHP を使用し、パラメータに基づいてフィルタリングするだけですが、このプロジェクトはすべて静的コードであり、DB はありません。現在、ブログ用に 2 つのページがありblog.html、blog-post.html両方にカテゴリを含むサイドバーがあります。現在の私のアプローチは、各カテゴリのIDを持ち、そのリンクがクリックされるたびに、ブログ投稿の現在のリストを非表示にし、一致するクラスのリストを表示しますが、私の問題は、自分のblog-post.htmlページにいて探しているコンテンツがDOMにないため、フィルターリンクは明らかに失敗します。これに関する最良のアプローチは何でしょうか。すべてのコンテンツを次のように1つのページに配置するという考えがありますblog.htmlblog-post.html誰かが [続きを読む] ボタンをクリックしない限り、コンテンツを非表示にします。これは良いアプローチですか、それとももっと良い方法がありますか? 助けてくれてありがとう！

ブログ.HTML

<!-- Filters -->
<ul>    
    <li>
        <a id="web-design" class="filter" href="http://www.site.com/blog/">Web Design</a>
    </li>
    <li>
         <a id="web-development" class="filter" href="http://www.site.com/blog/">Web Development</a>
    </li>
</ul>

<!-- Articles -->
<article class="layout-article web-design">
    <h3 class="title-medium">Lorem Ipsum 2</h3>
    <p>Donec in sem a nulla eleifend ...</p>
    <a href="http://www.site.com/blog/lorem-ipsum-2">Read More</a>
</article>

<article class="layout-article web-development">
    <h3 class="title-medium">Lorem Ipsum 1</h3>
    <p>Suspendisse convallis egestas ...</p>
    <a href="http://www.site.com/blog/lorem-ipsum-1">Read More</a>
</article>

BLOG-POST.HTML

<!-- Filters -->
<ul>    
    <li>
        <a id="web-design" class="filter" href="http://www.site.com/blog/">Web Design</a>
    </li>
    <li>
         <a id="web-development" class="filter" href="http://www.site.com/blog/">Web Development</a>
    </li>
</ul>

<!-- Article -->
<article class="layout-article web-design">
    <h3 class="title-medium">Lorem Ipsum 2</h3>
    <p>Donec in sem a nulla eleifend vivamus velit dolor, blandit quis sodales quis, ullamcorper vitae sem. Nunc elementum, eros sit amet pellentesque placerat, sem massa commodo lectus, nec auctor ligula quam eu nibh. Suspendisse potenti.</p>
</article>

jQuery

$(document).ready(function() {

    $('.filter').click(function(e) { 

        $('.layout-article').hide();

        $('.' + this.id).show(500);

        return false;
    }); 
});