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>

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

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

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

子问题：

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

如果我有一个提交按钮

并且我将 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();
    });
});

SUBQUESTION编辑：

修改为在清除所有复选框时“重新显示”所有帖子：
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"