Question

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

我已经创建了一个脚本来显示/隐藏div，具体取决于第一个单选按钮（位置）的选择。但我无法弄清楚如何专门编程其余选择器（单选按钮和复选框）。

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

在示例中：如果我选择Top和Tank and Melee，则显示的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：

$('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有点新，所以任何帮助都非常感谢。非常感谢你提前。

Answer 1

根据您的情况，我实际上建议您使用.not()功能。

因此，您要做的是创建所有选定广播的列表及其.字符分隔的值 - multiple class selectors的符号。< / p>

因此，对于您的示例If I select Top and Tank and Melee, the displayed divs should be only the ones with the classes .top, .tank and .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

显示/隐藏div，具体取决于收音机和复选框按钮

1 个答案: