Question

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

BLOG.HTML

blog-post.html

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>

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

的jQuery

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

Answer 1

将它们全部放在页面上真的是不错的做法，尽管取决于有多少可能会减慢页面加载时间（对于学校项目来说不太可能）。如果我现在得到了你现在拥有的东西，我可能会将每个“博客帖子”列表包含在一个div中，其中包含类“category”和实际类别的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必须是唯一的（显然），但2）它们比类更快的选择器。此外，由于您不太可能拥有多个“网络开发”博客列表，因此它们是独一无二的，应该使用ID。

或者您可能只是查看jQuery UI tabs或accordion或隐藏jQuery插件的任意数量的内容。

使用jQuery过滤类别

1 个答案: