En esta página: http://www.metagame.gg/champions/ Tengo varios filtros para mostrar u ocultar las imágenes a continuación.

Ya he creado un script para mostrar / ocultar los divs dependiendo de la selección de botones de radio, pero solo funciona cuando se seleccionan las 5 opciones. Además, no puedo entender cómo programar exclusivamente las casillas de verificación.

El resultado de seleccionar diferentes campos debe estar relacionado por una condición Y .

Por ejemplo: si selecciono Top, Tank y Melee, los divs mostrados deberían ser solo los que tienen las clases .top, .tank y .melee

Aquí está el 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>

Así es como se ven las imágenes HTML. Observe las diferentes clases que regulan los filtros:

<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>

Aquí está el JS que logré crear. Insisto en que solo funciona cuando se selecciona una opción de cada 5 botones de radio.

    $('#selector input').click(function() {
        var position = $('input[name=posi]:checked').val();
        var role = $('input[name=role]:checked').val();
        var dmg = $('input[name=dmg]:checked').val();
        var powers = $('input[name=powers]:checked').val();
        var skill = $('input[name=skill]:checked').val();

        var selected = position + role + dmg + powers + skill;
        $('.item').not(selected).hide();
        $('.item' + selected).show();
    });
    $("#resetCheckboxes").click(function(){
        $("#selector input").removeAttr("checked");
        $('.item').show();
    })

Soy un poco nuevo en JavaScript, por lo que cualquier ayuda es muy apreciada. Muchas gracias por adelantado.

2
juan fran 10 may. 2016 a las 05:53

3 respuestas

La mejor respuesta

Puedes usar .each()

$('#selector input').on('change',function() {
     var selected = '';
     $('input:checked').each(function(){
        selected += $(this).val();
     });
     alert(selected);
     $('.item').not($(selected)).hide();
     $('.item' + selected).show();
 });

Demo aquí

2
Mohamed-Yousef 10 may. 2016 a las 03:21

No probé y probé tu código ... Tengo que admitirlo.
Pero como una primera lectura rápida de su js, veo claramente que define vars en función de su atributo "verificado". Hay un agujero cuando ninguno está marcado en una entrada de nombre específico. El resultado es probablemente una var. "Indefinida". ¿Revisaste los resultados de la consola?

¡Estoy seguro de que sería una buena idea establecer valores predeterminados!

Algo como esto:

$('#selector input').click(function() {
    if ( $( elem ).is( ":checked" ) ){
        // Your var definition
    }else{
        // Define a default value !
    }
}

Haz esto para cada uno.

1
Louys Patrice Bessette 10 may. 2016 a las 03:15

Puede verificar si alguno de los valores es undefined o no y luego continuar con la funcionalidad show/hide.

$('#selector input').click(function() {
  var position = $('input[name=posi]:checked').val();
  var role = $('input[name=role]:checked').val();
  var dmg = $('input[name=dmg]:checked').val();
  var powers = $('input[name=powers]:checked').val();
  var skill = $('input[name=skill]:checked').val();
  if (position == undefined || role == undefined || dmg == undefined || powers == undefined || skill == undefined) {} else {
    var selected = position + role + dmg + powers + skill;
    console.log(selected, $('.item' + selected));
    $('.item').not(selected).hide();
    $('.item' + selected).show();
  }

});

Consulte este fiddle.

1
Developer107 10 may. 2016 a las 03:21