通过过滤器隐藏不需要的结果

Question

一切从何开始：我已经在这里问过一个关于过滤器的问题：Filter result using jquery or JS from an existing value set

问题：
由于数据来自另一个页面，通过form post，所有值首先应该是可见的......所以用户可以浏览该数据，如果需要，他有权使用过滤器进行排序要求。

是什么让我感觉自己像个火车残骸 是默认情况下页面上的值（要过滤）应该是可见的，然后当用户点击说class="tv"时，所有其他不包含tv的div classes应该隐藏

我卡在哪里？？？
我试图制定一个我认为逻辑上正确的 jQuery，但结果让我不相信:(

上一个问题的问题
我之前的问题有助于过滤...但默认情况下数据是hide()...我需要反向...

努力和小提琴？？
小提琴：http://jsfiddle.net/logintomyk/r6g3k/1/

HTML

<!-- filter checkboxes -->
    <input type="checkbox" id="wm" class="a" />WM
    <input type="checkbox" id="tv" class="a" />tv
    <input type="checkbox" id="ac" class="a" />ac
    <input type="checkbox" id="terrace" class="a" />terrace


    <br> <hr><br>

   <!-- Results to be filtered -->
    <div class="wm field">WM</div>
    <div class="tv field">TV</div>
    <div class="ac field">ac</div>
    <div class="terrace field">terrace</div>
    <div class="wm tv field">WM TV</div>
    <div class="wm tv ac field">wm tv ac</div>
    <div class="wm terrace field">wm terrace</div>
    <div class="tv field">tv</div>
    <div class="tv ac field">tv ac</div>

我的菜鸟 jQuery

$(document).ready(function () {
     $('.field').show(); // to show values by default


    $(".a").change(function () {
        $('div').hide(); //hide before displaying
        $(':checkbox:not(:checked)').each(function() {
            $("." + this.id).hide(); //hide unchecked filter values
        });
    }).change();
}); 

Answer 1

这可能更容易

var puts = $('.a');//get checkboxes
var cans = $('.field');//get content
puts.on('change', function() {//when checkbox changes
    if (!puts.filter(':checked').length) {//if nothing's checked
        cans.show();//show it all
    } else {//if something's checked
        cans.hide();//hide all
        puts.filter(':checked').each(function() {//get checked
            $('.'+this.id+':hidden').show();//show if hidden
        });  
    }
});

做了一个小提琴：http://jsfiddle.net/filever10/F8Vk2/

细分

puts 是复选框

cans 是内容块

当复选框状态发生变化时，如果当前没有选中任何内容，它会显示所有内容。如果选中某些内容，它会隐藏所有内容块并显示任何具有与复选框的id 匹配的类的内容。它只显示隐藏的内容，因此不必在适用于多个复选框的内容块上多次运行 show。