Фильтрация категорий с помощью jQuery

Question

Привет, я делаю проект для школы, я занимаюсь только интерфейсом кодирования, и одним из требований является то, что я фильтрую свои категории блога с помощью jQuery. Обычно я бы использовал PHP и просто отфильтровывал его на основе параметра, но этот проект является статическим кодом и без БД. В настоящее время у меня есть две страницы для блога: blog.html и blog-post.html обе с боковой панелью с категориями. Мой подход прямо сейчас имеет идентификатор для каждой категории, и всякий раз, когда эта ссылка нажимается, я скрою текущий список сообщений в блоге и покажу его с соответствующим классом, моя проблема заключается в том, что когда я нахожусь на моей странице blog-post.html и нажимаю ссылка фильтра, по-видимому, не работает, поскольку контент, который он ищет, отсутствует в DOM. Какой был бы лучший подход в этом отношении, у меня есть идея, что я просто помещаю весь контент на одну страницу, например blog.html, а затем скрываю содержимое blog-post.html, если кто-то не нажал кнопку «Читать дальше», это хороший подход или что-то лучше? Заранее благодарю за любую помощь!

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

БЛОГ-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; 
    }); 
}); 

Answer 1

Это действительно не плохо практ лед, чтобы разместить их на странице, хотя в зависимости от того, сколько из них может замедлить время загрузки страницы (маловероятно для школьного проекта). Если бы я дал то, что у вас есть прямо сейчас, я бы, вероятно, оберните каждый список «блог-пост» в DIV с классом «категории» и ид фактической категории, как

<div class="category" id="web-development"> 
    <!--blog listing goes here--> 
</div> 

, а затем каждый раз, когда фильтр щелкнул сделать что-то вроде

$('.filter').click(function(){ 
    $('.category').hide(); 
    var id = $(this).attr('data-id'); 
    $('#' + id).show(500); 
}); 

Кстати, я использую «данных идентификатор», потому что 1) идентификаторы должны быть уникальными (очевидно), но 2) они быстрее, чем селекторы классов. Плюс, поскольку у вас вряд ли есть несколько блога «web-development», они уникальны и должны использовать идентификаторы.

Или вы можете просто заглянуть в jQuery UI tabs или accordion или любое количество содержимого, скрывающее плагины jQuery.