根據收音機和複選框按鈕顯示/隱藏div

Question

本頁內容有：http://www.metagame.gg/champions/我有幾個過濾器可以顯示或隱藏下面的圖片。

我已經創建了一個腳本來顯示/隱藏divs取決於單選按鈕的選擇，但它只適用於選擇5個選項。此外，我無法弄清楚如何專門編程複選框。

選擇不同字段的結果應該與和條件相關聯。

在例如：如果我選擇頂部和坦克和近戰，顯示的div應該只有只是那些類.TOP，.tank 和 .melee

下面是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(); 
}); 

Demo Here

Answer 2

我沒有嘗試和測試你的代碼......我不得不承認。
但作爲您的js的第一次快速閱讀，我清楚地看到您基於其「checked」屬性定義了變量。沒有任何特定名稱輸入時會出現漏洞。結果可能是「未定義」變種。你檢查了控制檯結果嗎？

我相信這將是一個好主意，設置默認值！

事情是這樣的：

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

}); 

請參考fiddle。