用jQuery过滤类别

Question

嗨，我正在为学校做一个项目，我只做前端的编码，其中一个要求是我用jQuery过滤我的博客类别。通常，我会使用PHP并根据参数对其进行筛选，但是这个项目都是静态代码，没有DB。目前，我有两个页面的博客，blog.html和blog-post.html都有一个侧边栏，有类别。我现在的方法是为每个类别都有一个id，每当单击该链接时，我将隐藏当前的博客文章列表，并显示与匹配类对应的文章，但我的问题是，当我在我的blog-post.html页面上单击筛选器链接时，它显然失败了，因为它正在寻找的内容不在DOM中。解决这个问题的最佳方法是什么，我有一个想法，就是把所有的内容放在一个页面上，比如blog.html，然后隐藏blog-post.html内容，除非有人点击read按钮，这是一个好方法还是有更好的方法？提前感谢您的帮助！

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>

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;
    }); 
});

Answer 1

把它们全部放在页面上并不是一种很好的做法，尽管这取决于它有多少会减缓页面加载时间(对于一个学校项目来说不太可能)。如果我得到了您现在拥有的内容，我可能会将每个"blog-post“列表包装在一个div中，其中包含类”类别“和实际类别的id，如下

<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);
});

顺便提一句，我使用"data-id“是因为( 1) id必须是唯一的(很明显)，但是它们比类更快。另外，由于您不太可能有多个“web开发”博客列表，所以它们是唯一的，应该使用ids。

或者，您可能只需查看jQuery、UI、制表符或手风琴或隐藏jQuery插件的任意数量的内容。