0

（我不确定要使用什么标题，所以我采用了我认为描述的内容，如果不合适请告诉我/更改它）

所以我制作这个英雄联盟网站已经有一段时间了，但遇到了麻烦。我一直在制作一个过滤器菜单来过滤“冠军”（英雄），只显示那些具有正确角色/能力的人。

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

当我取消选中文本框时，它正确地收回了所有的冠军，但是当我“检查”它时，所有的冠军都消失了（应该这样做），但它没有显示那些适用于过滤器的。（我在 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();
                        }   
                }
           }
    };
4

2 回答 2

0

这是您的代码大大简化

演示

$(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);
于 2013-03-12T13:23:58.037 回答
0

你应该停止任何动画

$("."+name3).stop().show();
于 2013-03-12T13:06:45.240 回答