[英]Show / Hide div depending on radio and checkbox buttons
在此頁面中: 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有點陌生,因此非常感謝您的幫助。 提前非常感謝您。
您可以使用.each()
$('#selector input').on('change',function() {
var selected = '';
$('input:checked').each(function(){
selected += $(this).val();
});
alert(selected);
$('.item').not($(selected)).hide();
$('.item' + selected).show();
});
我沒有嘗試過測試您的代碼...我不得不承認。
但是,作為對js的快速閱讀,我清楚地看到您是基於vars的“ checked”屬性定義的。 如果在特定名稱輸入中未選中任何內容,則會出現一個漏洞。 結果可能是“未定義” var。 您檢查控制台結果了嗎?
我敢肯定,設置默認值將是一個好主意!
像這樣:
$('#selector input').click(function() {
if ( $( elem ).is( ":checked" ) ){
// Your var definition
}else{
// Define a default value !
}
}
每個都這樣做。
您可以檢查是否有任何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();
}
});
請參考這個小提琴 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.