gpt4 book ai didi

javascript - 仅根据单选按钮和复选框按钮显示/隐藏 div

转载 作者:行者123 更新时间:2023-12-02 14:39:39 25 4
gpt4 key购买 nike

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

我已经创建了一个脚本来根据第一个单选按钮(位置)的选择来显示/隐藏 div。但我无法弄清楚如何专门对其余选择器(单选按钮和复选框)进行编程。

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

例如:如果我选择 Top、Tank 和 Melee,则显示的 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:

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

我对 javascript 有点陌生,所以非常感谢任何帮助。预先非常感谢您。

最佳答案

对于您的情况,我实际上建议使用 .not()功能。

因此,您想要做的是创建所有选定 radio 及其值的列表,并用 . 字符分隔 - multiple class selectors 的表示法。 .

因此,对于您的示例,如果我选择 Top、Tank 和 Melee,则显示的 div 应该仅包含类 .top、.tank 和 .melee,您的选择器字符串将为 “.top.tank.melee”

使用该字符串,您可以显示匹配的字符串并隐藏不匹配的字符串:

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

关于javascript - 仅根据单选按钮和复选框按钮显示/隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37123328/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com