In this page: http://www.metagame.gg/champions/ I have several filters to display or hide the pictures below.
I have already created a script to show/hide the divs depending on the selection of the first radio button (position). But I cannot figure out how to exclusively program the rest of the selectors (Radio buttons and checkbox).
The result of selecting different fields should be related by an AND condition.
In example: If I select Top and Tank and Melee, the displayed divs should be only the ones with the classes .top, .tank and .melee
Here is the HTML
<div id="selector">
<div id="selectorTitle">Champions filters</div>
<div id="selectorWrapperFirts">
<div id="selectorSection">Position</div>
<div id="selectorContent">
<div id="buttonWrapper"><label><input name="posi" type="radio" value=".top" /> Top</label></div>
<div id="buttonWrapper"><label><input name="posi" type="radio" value=".jungle" /> Jungle</label></div>
<div id="buttonWrapper"><label><input name="posi" type="radio" value=".mid" /> Mid</label></div>
<div id="buttonWrapper"><label><input name="posi" type="radio" value=".bot" /> Bot</label></div>
</div>
</div>
<div id="selectorWrapper">
<div id="selectorSection">Role</div>
<div id="selectorContent">
<div id="buttonWrapper"><label><input name="role" type="radio" value=".Assassin" /> Assassin</label></div>
<div id="buttonWrapper"><label><input name="role" type="radio" value=".Fighter" /> Fighter</label></div>
<div id="buttonWrapper"><label><input name="role" type="radio" value=".Marksman" /> Marksman</label></div>
<div id="buttonWrapper"><label><input name="role" type="radio" value=".Mage" /> Mage</label></div>
<div id="buttonWrapper"><label><input name="role" type="radio" value=".Support" /> Support</label></div>
<div id="buttonWrapper"><label><input name="role" type="radio" value=".Tank" /> Tank</label></div>
</div>
</div>
<div id="selectorWrapper">
<div id="selectorSection">Damage Type</div>
<div id="selectorContent">
<div id="buttonWrapper"><label><input name="dmg" type="radio" value=".AD" /> AD</label></div>
<div id="buttonWrapper"><label><input name="dmg" type="radio" value=".AP" /> AP</label></div>
<div id="buttonWrapper"><label><input name="dmg" type="radio" value=".Hybrid" /> Hybrid</label></div>
</div>
</div>
<div id="selectorWrapper">
<div id="selectorSection">Power Spike</div>
<div id="selectorContent">
<div id="buttonWrapper"><label><input name="powers" type="radio" value=".egame" /> Early game</label></div>
<div id="buttonWrapper"><label><input name="powers" type="radio" value=".mgame" /> Mid game</label></div>
<div id="buttonWrapper"><label><input name="powers" type="radio" value=".lgame" /> Late game</label></div>
</div>
</div>
<div id="selectorWrapper">
<div id="selectorSection">Skill Ceiling</div>
<div id="selectorContent">
<div id="buttonWrapper"><label><input name="skill" type="radio" value=".Low" /> Low</label></div>
<div id="buttonWrapper"><label><input name="skill" type="radio" value=".Normal" /> Normal</label></div>
<div id="buttonWrapper"><label><input name="skill" type="radio" value=".High" /> High</label></div>
<div id="buttonWrapper"><label><input name="skill" type="radio" value=".Vhigh" /> Very High</label></div>
</div>
</div>
<div id="selectorWrapperLast">
<div id="selectorSection">Qualities</div>
<div id="selectorContent">
<div id="buttonWrapper"><label><input type="checkbox" value=".Ranged" /> Ranged</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Melee" /> Melee</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Crowd-Control" /> Crowd Control</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Engage" /> Engage</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Disengage" /> Disengage</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Counter-Engage" /> Counter engage</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Jungle-Clear" /> Jungle clear</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Burst" /> Burst</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Peel" /> Peel</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Poke" /> Poke</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Scape" /> Scape</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Siege" /> Siege</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Splitpush" /> Splitpush</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Sustain" /> Sustain</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Teamfight" /> Teamfight</label></div>
<div id="buttonWrapper"><label><input type="checkbox" value=".Wave-Clear" /> Wave clear</label></div>
</div>
</div>
<div id="resetCheckboxesDiv">
<button id="resetCheckboxes">Reset</button>
</div>
</div>
This is how the pictures HTML look. Notice the different classes that regulate the filters:
<div class="item Melee Crowd-Control Engage Counter-Engage Jungle-Clear Burst Scape Splitpush Sustain Normal egame Fighter Tank Hybrid top jungle ">
<a href="aatrox">
<img class="champavatar2" src="/icon/champions/aatrox.png" alt="">
<div class="textavatar">Aatrox</div>
</a>
</div>
<div class="item Ranged Crowd-Control Engage Counter-Engage Burst Poke Scape Siege Sustain Teamfight Wave-Clear High mgame Assassin Mage AP mid ">
<a href="ahri">
<img class="champavatar2" src="/icon/champions/ahri.png" alt="">
<div class="textavatar">Ahri</div>
</a>
</div>
<div class="item Melee Burst Scape Splitpush Sustain Normal lgame Assassin Fighter Hybrid top mid ">
<a href="akali">
<img class="champavatar2" src="/icon/champions/akali.png" alt="">
<div class="textavatar">Akali</div>
</a>
</div>
<div class="item Melee Crowd-Control Engage Disengage Counter-Engage Scape Sustain Teamfight Peel High lgame Fighter Support Tank AP bot">
<a href="alistar">
<img class="champavatar2" src="/icon/champions/alistar.png" alt="">
<div class="textavatar">Alistar</div>
</a>
</div>
Here is the JS that I managed to create for the first radio selector:
$('input[name=posi]').click(function() {
if( $('input[name=posi]:checked').val() == '.top' ) {
$('.top').show();
$('.jungle').hide();
$('.mid').hide();
$('.bot').hide();
}
else if ( $('input[name=posi]:checked').val() == '.jungle' ) {
$('.top').hide();
$('.jungle').show();
$('.mid').hide();
$('.bot').hide();
}
else if ( $('input[name=posi]:checked').val() == '.mid' ) {
$('.top').hide();
$('.jungle').hide();
$('.mid').show();
$('.bot').hide();
}
else if ( $('input[name=posi]:checked').val() == '.bot' ) {
$('.top').hide();
$('.jungle').hide();
$('.mid').hide();
$('.bot').show();
}
});
I am a bit new to javascript so any help is highly appreciated. Thank you very much in advance.
For your situation, I would actually recommend making use of the .not() function.
So, what you'd want to do is create a list of all the selected radio's and their values separated by the . character - a notation for multiple class selectors.
So for your example, If I select Top and Tank and Melee, the displayed divs should be only the ones with the classes .top, .tank and .melee, your selector string would be ".top.tank.melee".
With that string, you could show those that match and hide those that don't:
var selected = ...; // <-- for example, ".top.tank.melee"
$('.item').not(selected).hide(); // hide items not matching your classes
$('.item' + selected).show(); // show items matching your classes