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

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

SUB-问题：

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

如果我有提交按钮<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(); }); });

SUBQUESTION EDIT：

修改为在重置所有复选框后“重新显示”所有帖子： 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();

jlecery filter（），其中列出的类没有空格，给出了所选项的交集;如果您想要联合（具有至少一个类别的项目），请使用带有".category1, .category2, .categoryN"

的过滤器

jQuery过滤后过滤

2 个答案: