Question

一切开始的地方：我已在此处询问过滤器上的一个问题：Filter result using jquery or JS from an existing value set

问题：
由于数据是通过form post从另一个页面传来的，因此所有值都应该首先显示......因此用户可以查看该数据，如果需要，他可以使用过滤器理清要求。

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

我被困的地方???
我试图找出一个我认为逻辑上正确的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。

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

1 个答案: