显示/隐藏div，取决于单选和复选框按钮

Question

在此页面中： http : //www.metagame.gg/champions/我有几个过滤器来显示或隐藏下面的图片。

我已经创建了一个脚本来显示/隐藏div，具体取决于单选按钮的选择，但是它仅在选择5个选项时才起作用。 此外，我无法弄清楚如何专门对复选框进行编程。

选择不同字段的结果应通过AND条件关联。

例如：如果我选择“顶部”，“坦克”和“近战”，则显示的div应该仅是具有.top，.tank 和 .melee类的div。

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

这就是图片HTML的外观。 注意调节过滤器的不同类：

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

这是我设法创建的JS。 我坚持认为，只有在选择每个5个单选按钮的选项时，它才起作用。

    $('#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();
    })

我对javascript有点陌生，因此非常感谢您的帮助。 提前非常感谢您。

Answer 1

您可以使用.each()

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

在这里演示

Answer 2

我没有尝试过测试您的代码...我不得不承认。
但是，作为对js的快速阅读，我清楚地看到您是基于vars的“ checked”属性定义的。 如果在特定名称输入中未选中任何内容，则会出现一个漏洞。 结果可能是“未定义” var。 您检查控制台结果了吗？

我敢肯定，设置默认值将是一个好主意！

像这样：

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

每个都这样做。

Answer 3

您可以检查是否有任何undefined的值，然后继续执行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();
  }

});

请参考这个小提琴 。