jQuery通过帖子过滤

Question

我有一个显示自定义帖子的存档页面，每个帖子都有一个div，在 div 中显示帖子的分类术语（自定义类别“jobtype”），如下所示：

<div class="hidden tags category1 category2 cat3 etc..."></div>

然后我有一个带有复选框的表单，每个复选框的值对应于帖子可能具有的一些可能类别：

<input class="filterbox" type="checkbox" name="interest" value="academia" />Academia<br />
<input class="filterbox" type="checkbox" name="interest" value="adminassistant" />Admin/Assistant<br />
<input class="filterbox" type="checkbox" name="interest" value="communicationsmarketing" />Communications/Marketing<br />
<input class="filterbox" type="checkbox" name="interest" value="development" />Development<br />

我想使用 jQuery 根据选中的复选框过滤（阅读：$('.postclass').hide();）当前帖子。目前我正在使用以下 jQuery 代码：

var $checkboxes;

function storecat() {         
    var tags = $checkboxes.map(function() {
        if(this.checked) return this.value;
    }).get().join(' ');
    $('#selected-interests').html(tags); 
}

$(function() {
    $checkboxes = $('.filterbox:checkbox').change(storecat);
});

$('#filtersubmit').click(){

}

这是一个关于分类页面上帖子条目的愚蠢示例：

<div class="post_entry">
    <div class="post-thumb"></div>
    <h4 class="post-title"><a href="#" title="Title">Title</a></h4>
<div class="post-meta">
    <p class="post_meta_organization">Job Organization</p>
        <p class="post_meta_location">City, State</p>
        <p class="post_meta_url">Website: <a href="#">Click Here</a></p>
    </div>
    <div class="hidden tags early-career internship other web-developmentit"></div>
    <p class="post_excerpt">Post Content Here</p>
</div>

我想我需要做一个$('.post_entry').each(); 来检查var tags，但我完全不确定从哪里开始。我想我需要的是创建一个标签数组（现在他们正在创建一个列表？），并在 <div class="hidden tags..."></div>

中创建一个类数组

我希望它隐藏没有任何相关标签的帖子，但只显示选择了所有标签的帖子。如果有人可以帮助我的.each() 功能，我们将不胜感激。

如果您想查看更多布局，请转到http://www.cirkut.net/wp/libertyguide/jobs

如果需要更多信息，请询问。

子问题：

如果未选择任何输入，如何显示所有帖子？我没有将此作为新问题发布，因为我发现这与此问题高度相关。

如果我有提交按钮<input id="filter_submit" value="FIND" />

我将 jQuery 更改为

$('#filter_submit').click( function() {
    $('.tags').parent().hide();
    $('input:checked').each( function(i) {
    $('div.' + $(this).val()).parent().show();
});

当我点击提交按钮时，所有帖子都隐藏了。有什么帮助吗？

Answer 1

这就是你要找的东西吗：http://jsfiddle.net/3qwty/1/

$('input').click( function() {
    $('.tags').hide();
    $('input:checked').each( function() {
        $('div.' + $(this).val()).show();
    });
});

目前设置为仅显示选中的项目，但您可以翻转它以隐藏选中的项目（即http://jsfiddle.net/3qwty/2/）。

编辑：

看起来你可能隐藏了post-meta 的容器 div，在这种情况下你可以这样做： http://jsfiddle.net/3qwty/3/，隐藏父容器

$('input').click( function() {
    $('.tags').parent().show();
    $('input:checked').each( function() {
        $('div.' + $(this).val()).parent().hide();
    });
});

子问题编辑：

修改为在清除所有复选框后“重新显示”所有帖子： http://jsfiddle.net/3qwty/8/

$('input').click( function() {
    $('.tags').parent().hide();
    $('input:checked').each( function() {
        $('div.' + $(this).val()).parent().show();
    });
    if (!$('input:checked').length) $('.tags').parent().show();
});

Answer 2

隐藏所有具有“post_entry”类的帖子的可能解决方案，然后仅显示具有所有选定类别的帖子：

$(".post_entry").hide().filter(".category1.category2.categoryN").show();

jquery filter() 列出了没有空格的类，给出了所选项目的交集；如果你想要联合（至少有一个类别的项目），请使用带有".category1, .category2, .categoryN"的过滤器