使用jquery按类别过滤Wordpress帖子

时间:2012-08-23 17:11:45

标签: jquery wordpress filter toggle categories

我正在尝试显示可以过滤的新闻Feed。

让我们说wordpress类别“NEWS”有子类别“体育”“商业”和“地区1”,“地区2”,“地区3”等等。

所以页面看起来像这样:

          ** ALL NEWS | Sports | Business  **

区域1

区域2

区域3

这是Wordpress循环中的帖子:

                   //Get all posts with a category of "NEWS"
                    query_posts('cat=1' );
                while (have_posts()) : the_post();
                echo '<li class="';

                        //Display the categories
                        $categories = get_the_category();
                        $output = '';

                        if($categories){
                            foreach((get_the_category()) as $category) { 
                            $output = $category->cat_name .'-';
                            echo $output;
                            } 
                    }

显示:

<li class="news-sports-region1">Article1</li>
<li class="news-business-region2">Article2</li>
<li class="news-sports-region3-">Article3</li> 

所以在我的jquery脚本中,我试图找出用户点击每个类别时的最佳处理方式。如果您的解决方案比我想要的更简单,请告诉我。

我需要以下代码:

如果用户点击“体育”,则隐藏CLASS中没有“体育”一词的所有帖子。 我还需要知道如何记住点击的区域以及按所选区域进行过滤。

我的代码现在变得一团糟,有一堆我无法解决的不同解决方案。 我试图通过将类别应用为“数据类别”属性进行过滤,但在某处遇到了障碍。

请帮助,谢谢!

1 个答案:

答案 0 :(得分:2)

首先,如果你不将不同的类连在一起(例如,只是在“新闻体育区域”之间放置一个空格),它会有所帮助。这样,你可以将一个类应用于一个特定的类(“新闻”或“体育”),而不必做一些复杂的事情来选择类的一部分(如div [class * ='news-'])。如果你完成了,那么它将如下所示:

<li class="news sports region1">Article1</li>
<li class="news business region2">Article2</li>
<li class="news sports region3-">Article3</li> 

然后你需要你的jquery做的是动画显示/隐藏这些类别。类似的东西:

$('.news').hide(600)
$('.sports').show(600)

我自己并不擅长JQuery,所以这只是对如何做到这一点的概述。希望它能让你开始。