Question

（我不确定要使用什么标题，所以如果它不合适，我会采取我所感受到的描述，请告诉我/更改它）

所以我现在一直在制作这个传说联盟网站并遇到麻烦。我一直在制作一个过滤菜单来过滤“冠军”（英雄），只显示具有正确角色/能力的人。

所以我在复选框上有一个点击式脚本，点击时应显示正确的冠军。但它似乎没有用。

当我取消选中文本框时，它会正确收回所有冠军，但是当我“检查”它时所有冠军消失（应该这样做）但它并没有显示适用于过滤器的那些。（我在DIV上获得了所有正确的ID，我知道这个，因为我有一个可用于过滤的搜索栏，但我想要它的复选框，因为它更简单）

复选框：

    AD<input type="checkbox" name="adcarry" value="adcarry" id="check1" class="check1" onclick="boxchanged()">
    AP<input type="checkbox" name="apcarry" value="apcarry" id="check2" class="check2" onclick="boxchanged()"> 
    Carry<input type="checkbox" name="carry" value="carry" id="check3" class="check3" onclick="boxchanged()">
    Tank<input type="checkbox" name="tank" value="tank" id="check4" class="check4" onclick="boxchanged()">
    Support<input type="checkbox" name="support" value="support" id="check5" class="check5" onclick="boxchanged()">
    Jungler<input type="checkbox" name="jungler" value="jungler" id="check6" class="check6" onclick="boxchanged()">
    Burst<input type="checkbox" name="burst" value="burst" id="check7" class="check7" onclick="boxchanged()">
    <button type="button" onclick="boxchanged()">Reset</button>

受影响的div设计如下:(班级根据冠军的不同而变化）

    <div class="champion apcarry mid" id="ahri" onclick="OnClickChampion(this.id)"><img src="img/champions/ahri.jpg"> Ahri </div>

脚本：

    function boxchanged ( )
    {   
        $("#num1").val("Search..");
        if ($("[type='checkbox']:checked").length == 0)
            {
                $(".champion").show(200);
            }
        else
            {
            $(".champion").hide(200);
            for (var i = 1;i < 7; i++)
                {
                    var name = "check"+i;
                    console.log(name)
                    var name2 = document.getElementById(name);
                    console.log(name2)
                    if (name2.checked == true)
                        {
                           var name3 = name2.name;
                            $("."+name3).show();
                        }   
                }
           }
    };

Answer 1

你应该停止任何动画

$("."+name3).stop().show();

Answer 2

这是您的代码简化

DEMO

$(function() {
    $(".champion").on("click",function() {
      // put OnClickChampion here
    });    
    $(".check").on("click",function() {
      $("#num1").val("Search..");
      var checked = $("[type='checkbox']:checked");
        console.log(checked.length);
      if (checked.length == 0) {
        $(".champion").stop().show(200);
      }
      else {
        $(".champion").hide(200);
        checked.each(function() {
          var klass = $(this).val();
          $("."+klass).stop().show(200);
        });
      }    
    });
});

使用

<form>
  <label for="check1">AD</label>
    <input type="checkbox" value="adcarry" id="check1" class="check"/>
  <label for="check2">AP</label>
      <input type="checkbox" value="apcarry" id="check2" class="check"/> 
  <label for="check3">Carry</label>
      <input type="checkbox" value="carry" id="check3" class="check"/>
  <label for="check4">Tank</label>
      <input type="checkbox"value="tank" id="check4" class="check"/>
  <label for="check5">Support</label>
    <input type="checkbox" value="support" id="check5" class="check"/>
  <label for="check6">Jungler</label>
    <input type="checkbox"  value="jungler" id="check6" class="check"/>
  <label for="check7">Burst</label>
    <input type="checkbox" value="burst" id="check7" class="check"/>
  <button type="reset" class="check">Reset</button>
</form>
<div class="champion apcarry mid" id="ahri"><img src="img/champions/ahri.jpg"> Ahri </div>

仅显示具有多个班级的

    var klasses=[]
    checked.each(function() {
      klasses.push("."+$(this).val())
    });
    $(".champion").not(klasses.join(",")).stop().hide(200);

Javascript不会隐藏内容

2 个答案: