javascript - How to display/sort specific divs based on user choice -

Sorry if the title does not accurately describe what I am trying to do. I'm the newbie to say this all at least! Please read the example below to help you understand what I am trying to achieve.

I have a list of the divisions, each of which can be a series of "tags", because I will call them. For this example I would use red, blue, and green as possible tags. In each tag, a button has been added with which the user can click to display the device. When the button is "on," it will display the divs with the specific tag, but when it is "closed" it will hide the content with that tag. It is as long as there is another tag in the content that is currently running.

Red: ON

Blue: OFF

Green: ON

---

DIV 1: RED

DIV 2: Blue

DIV 3: Green

DIV 4: Red, Blue

DIV 5: Blue, Green

DIV 6: Green, Red

Because the tag is closed blue, because every div excluding DIV 2 will be displayed. The reason for this is that it still displays DIV 4 and DIV 5 because the red and green tags are still on, if you want to close the tag, then only the 3D, 3 and 5 DIV of DIG will be displayed, because only green is on.

I am convinced that there is a much more elegant way of explaining the above, but hopefully it is found throughout the point I am looking for a solution that will achieve this goal, but so far She has to find It has a lot of list filters that use the search box, but it will not work for my needs.

If someone can tell me in the right direction that what I can use to accomplish it,

This is an example of how you can do it:

    gt;) Val (' ( 'Green: on'), 'Blue': $ ('' input ''), 'green': $ ('input type =' button "> gt; & gt; type =" button " & Gt; & lt; / input & gt; '). Val (' BLUE: on ')}; var tag = []; var _updateTaggedElements = function () {// Somewhat optimized ... again .. Else if (0 == tags.length) {$ ('# tagElements & gt; .red, .green, .blue'). Hide ();} and {$ ('# tagsElements'). Find ('. '+ Tag .joined (',. ')) Show (). End () .find (': no ​​(. '+ Tag. ('. ') + ")"). Hide ();}} ; $ .each (Button, function (c, el) {tags.push (c); // Show all tag elements initially E gives ... $ ('# button'). Attachments (el.click (function () {var state = /off$/.test(el.vaL.)) Var tag index = $ .inter ( C, tag); El.val (c.toUpperCase) + ":" + (state? 'On': 'off')); if (state) {if (-1 == tagIndex) {tags.push ( C);}} And if (-1! = Tag Indexes) {tags.splice (tagIndex, 1);} _updateTaggedElements (); })); }); }); // -> & Lt; / Script & gt; & Lt; Title & gt; Button selector test & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "button" & gt; & Lt; / Div & gt; & Lt; Div id = "tag elements" & gt; & Lt; Div class = "red" & gt; Div 1: Red & lt; / Div & gt; & Lt; Div class = "blue" & gt; DIV 2: Blue & lt; / Div & gt; & Lt; Div class = "green" & gt; Div 3: Green & lt; / Div & gt; & Lt; Div class = "red blue" & gt; DIV 4: Red, Blue & lt; / Div & gt; & Lt; Div class = "blue green" & gt; DIV 5: Blue, Green & lt; / Div & gt; & Lt; Div class = "green red" & gt; Div 6: Green, Red & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

Of course, modify it for your needs, but as you look, it is quite easy and small to reduce. Using the tag array, you can have as many combinations of as many tags as you want.