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

在这个页面中：我有几个过滤器来显示或隐藏下面的图片

我已经创建了一个脚本，根据第一个单选按钮（位置）的选择来显示/隐藏div。但我不知道如何专门编程其余的选择器（单选按钮和复选框）

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

在示例中：如果我选择Top和Tank and Melee，则显示的div应仅为具有.Top、.Tank和类的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>

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

---

事先非常感谢。

鉴于您的情况，我建议您使用该功能

因此，您要做的是创建一个列表，列出所有选定的收音机及其值，并用

字符分隔，这是一个符号

因此，对于您的示例，

如果我选择Top和Tank以及Melee，则显示的div应仅为具有.Top、.Tank和.Melee类的div

，您的选择器字符串应为

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

---

var selected=…；// 对于您的情况，我实际上建议使用该函数

因此，您要做的是创建一个列表，列出所有选定的收音机及其值，并用
字符分隔，这是一个符号

因此，对于您的示例，
如果我选择Top和Tank以及Melee，则显示的div应仅为具有.Top、.Tank和.Melee类的div
，您的选择器字符串应为
“.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

var selected=…；//您有能力更改HTML吗？这不是必需的，但是jQuery可以很好地处理HTML上的
数据
属性。你可以选择像
是的，我可以很容易地更改HTML。不管我之前的评论，smaili的解决方案比我想象的更简单。要建立所选的
字符串，可以使用
：选中的
选择器，
var selected=“”$（“输入：选中”）。每个（函数（索引，输入）{selected+=input.value；}）您有能力更改HTML吗？这不是必需的，但是jQuery可以很好地处理HTML上的
数据
属性。你可以选择像
是的，我可以很容易地更改HTML。不管我之前的评论，smaili的解决方案比我想象的更简单。要建立所选的
字符串，可以使用
：选中的
选择器，
var selected=“”$（“输入：选中”）。每个（函数（索引，输入）{selected+=input.value；}）
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