1

嗨，我正在为学校做一个项目，我只做编码的前端，其中一个要求是我用 jQuery 过滤我的博客类别。通常我会使用 PHP 并根据参数对其进行过滤，但这个项目都是静态代码，没有数据库。目前我有两个博客页面，blog.html并且blog-post.html都有一个包含类别的侧边栏。我现在的方法是为每个类别设置一个 ID，每当单击该链接时，我都会隐藏当前的博客文章列表并显示具有匹配类的文章，但我的问题是当我在我的blog-post.html页面上并单击过滤器链接它显然失败了，因为它正在寻找的内容不在 DOM 中。最好的方法是什么，我有一个想法，我只是把所有内容放在一个页面上，比如blog.html然后隐藏blog-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>

博客-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;
    }); 
});
4

1 回答 1

1

将它们全部放在页面上确实不是坏习惯，尽管取决于有多少它可能会减慢页面加载时间（不太可能用于学校项目）。如果我现在得到你所拥有的，我可能会将每个“博客文章”列表包装在一个带有“类别”类和实际类别 ID 的 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);
});

顺便说一句，我使用“data-id”是因为 1）id 必须是唯一的（显然），但是 2）它们是比类更快的选择器。另外，由于您不太可能拥有多个“网络开发”博客列表，因此它们是独一无二的，应该使用 id。

或者您可能只是查看 jQuery UI选项卡或手风琴或任何数量的内容隐藏 jQuery 插件。

于 2013-08-26T03:24:06.327 回答