CODEWITHSUNDEEP
javascriptjqueryfilter
NoobEditor
NoobEditor

Reputation: 15881

Hide non required results through filters

Where it all began : I have already asked one question on filters here : Filter result using jquery or JS from an existing value set

Problem :
Since the data is coming from another page through a form post, all values are supposed to be visible at first......so user can go through that data and if required, he has the priviledge to use filters to sort out the requirement.

what's making me feel like a train-wreck is that the values (to be filtered) on page are supposed to be visible by default and then when user clicks on say class="tv", all other div classes which do not contain tv should hide

Where i am stucked???
I tried to work out a jQuery which i thought was correct logically but the result made me believe otherwise :(

Problem with previous question
My previous question helped in filtering...but the data was hide() by default...i needed reverse....

Effort and Fiddle??
Fiddle : 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>

my noob 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();
});

Upvotes: 1

Views: 196

Answers (1)

FiLeVeR10
FiLeVeR10

Reputation: 2165

this might be easier

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
        });  
    }
});

made a fiddle: http://jsfiddle.net/filever10/F8Vk2/

breakdown

puts is the checkboxes

cans is the content blocks

When a checkbox state changes, if nothing is currently checked it shows everything. If something is checked it hides all content blocks and shows any that have a class that matches the id of a checked box. It only shows things that are hidden, so it doesn't have to run show multiple times on content blocks that apply to multiple checked boxes.

Upvotes: 1

Related Questions