Multifilter Jquery

I'm trying to create a filter for some content. However I'm not sure how to solve this problem: http://codepen.io/anon/pen/aOPPaB

html

<span class="toggle" id="red">Toggle red</span>
<span class="toggle" id="blue">Toggle blue</span>
<span class="toggle" id="big">Toggle Big</span>
<span class="toggle" id="small">Toggle Small</span>
<div id="content" class="red small"></div>
<div id="content" class="red big"></div>
<div id="content" class="blue small"></div>
<div id="content" class="blue big"></div>

js

$(".toggle").click(function() {
    var id = $(this).attr('id');
    $("." + id).toggle();
});

It works fine when i just try to toggle the size or the color individually. But if I try to mix them up it does not work as intended.

If I click "toggle red" and "toggle small" it should only show the big blue ones.

Answers


It works the way toggle should work. Once you click on red for example - the first and second divs are hidden and 3rd and 4rd are shown:

<div id="content" class="red small" style="display: none;"></div>
<div id="content" class="red big" style="display: none;"></div>
<div id="content" class="blue small"></div>
<div id="content" class="blue big"></div>

Then, if you click on big - each element with the big class will get toggled, so if red big had the display: none;, now it will be display: block, and the blue big will now have display: none, so your result will be:

<div id="content" class="red small" style="display: none;"></div>
<div id="content" class="red big" style="display: block;"></div>
<div id="content" class="blue small"></div>
<div id="content" class="blue big" style="display: none;"></div>

To make sure you have a "multi-filter" you might wanna add to your buttons the information that it was toggled, and then toggle (or show/hide) only the elements that related to all of your filteres.

$(".toggle").click(function() {
    $(this).toggleClass('toggled');
    toggledIds = []
    $('.toggled').each(function(i, e){
        toggledIds[toggledIds.length] = $(e).attr('id')
    });
    // Now you can do whatever you want with the list of the ids
});

If you click on red, then on big and then on blue, you will get toggledIds == ['red', 'big', 'blue']


Need Your Help

Implement Google Custom Search Other Than Via UIWebView

ios objective-c cocoa-touch

Is there a way to do Google custom searches natively within an iOS app (without using web views)?

Java .class files vs. .java file in a jar

java jar libraries

Should you use .class files or .java files in a .jar library?