一切开始的地方: 我已经在此处问了一个问题: 使用jQuery或JS的过滤结果来自现有值集

问题 :
由于数据来自另一个页面 form post, ,所有值首先都应该可见......所以用户可以浏览该数据,如果需要,他有特权使用过滤器来整理要求。

是什么让我觉得自己像火车是默认情况下应该可见的(待过滤)的值(要过滤),然后当用户单击时, class="tv", ,所有其他 div classes 不包含 tv 应该隐藏

我被困在哪里???
我试图制定一个我认为在逻辑上正确的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();
}); 
有帮助吗?

解决方案

这可能更容易

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 一个检查盒。它仅显示隐藏的内容,因此它不必在适用于多个检查框的内容块上多次运行。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top