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

アニメーションを停止する必要があります

$("."+name3).stop().show();
于 2013-03-12T13:06:45.240 に答える
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 に答える