StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This may not be the most efficient way, but it is the first thing that comes to my mind, and it works:</p> <p>Assuming you have a filter button with <code>id="apply"</code>...</p> <pre><code>$("#apply").click(function (e) { e.preventDefault(); var number = $("[name='number']:checked").val(); var letter = $("[name='letter']:checked").val(); $("li").hide(); $("li[class='" + number + " " + letter + "']").show(); }); </code></pre> <p><a href="http://jsfiddle.net/musefan/6VXVV/" rel="nofollow">Here is a working example</a></p> <hr> <p><strong>Better Version</strong></p> <p>As the above will fail if your <code>li</code> elements have any other classes, here is an alternative approach using JQuery's <code>filter</code> method:</p> <pre><code>$("#apply").click(function (e) { e.preventDefault(); var number = $("[name='number']:checked").val(); var letter = $("[name='letter']:checked").val(); $("li").hide(); $("li").filter(function (index) { return $(this).hasClass(number) && $(this).hasClass(letter); }).show(); }); </code></pre> <p><a href="http://jsfiddle.net/musefan/6VXVV/1/" rel="nofollow">Here is a working example</a></p> <hr> <p>You can apply this logic to any event, such as <code>change</code> for the radio buttons...</p> <pre><code>$("input[type='radio']").change(function () { var number = $("[name='number']:checked").val(); var letter = $("[name='letter']:checked").val(); //check if both radios have selected values before proceeding if (!number || !letter) return; $("li").hide(); $("li").filter(function (index) { return $(this).hasClass(number) && $(this).hasClass(letter); }).show(); }); </code></pre> <p><a href="http://jsfiddle.net/musefan/6VXVV/2/" rel="nofollow">Here is a working example</a></p> <p>Of course, if any of your <code>number</code>s are <code>0</code> then they will not pass the value check as it stands.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload