ループを使用して複数のJQuery関数を定義する

Question

タグに応じて要素を表示/非表示にできるタグボタン付きのページを作成しようとしています。 これは、ループのない私の最初のバージョンです：

https://jsfiddle.net/Pokipsy/uu7y3x2x/

$(document).ready(function(){ 
 
    $(".showall").click(function(){ 
 
     $(".item").show(); 
 
     $(".filter").text("All elements") 
 
    }); 
 
    $(".show.a").click(function(){ 
 
    \t \t $(".item").hide(); 
 
     $(".item.a").show(); 
 
     $(".filter").text("Tag: a") 
 
    }); 
 
    $(".show.b").click(function(){ 
 
    \t \t $(".item").hide(); 
 
     $(".item.b").show(); 
 
     $(".filter").text("Tag: b") 
 
    }); 
 
    $(".show.c").click(function(){ 
 
    \t \t $(".item").hide(); 
 
     $(".item.c").show(); 
 
     $(".filter").text("Tag: c") 
 
    }); 
 
});

.clickable:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
<li class="clickable showall">all</li> 
 
<li class="clickable show a">a</li> 
 
<li class="clickable show b">b</li> 
 
<li class="clickable show c">c</li> 
 
</ul> 
 

 
<h3 class="filter"> 
 
All elements 
 
</h3> 
 
<ul> 
 
<li class="a item">first a</li> 
 
<li class="b item">second b</li> 
 
<li class="a b item">third a b</li> 
 
<li class="c item ">fourth c</li> 
 
<li class="c b item">fifth c b</li> 
 
</ul>

それは動作しますが、タグが、私はループを使用しようとしたので、あまりにも多くのであれば、この戦略は非常に長いコードを生成します

https://jsfiddle.net/Pokipsy/f9uqetnn/1/

01より短いコードを作成する

$(document).ready(function(){ 
 
    $(".showall").click(function(){ 
 
     $(".item").show(); 
 
     $(".filter").text("All elements") 
 
    }); 
 
    var tags = [".a",".b",".c"]; 
 
    
 
    for(i = 0; i < 3; i++) { 
 
    x=tags[i]; 
 
    $(".show".concat(x)).click(function(){ 
 
    \t \t $(".item").hide(); 
 
     $(".item".concat(x)).show(); 
 
     $(".filter").text("Tag: ".concat(x)) 
 
    \t \t }); 
 
    } 
 
});

.clickable:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
<li class="clickable showall">all</li> 
 
<li class="clickable show a">a</li> 
 
<li class="clickable show b">b</li> 
 
<li class="clickable show c">c</li> 
 
</ul> 
 

 
<h3 class="filter"> 
 
All elements 
 
</h3> 
 
<ul> 
 
<li class="a item">first a</li> 
 
<li class="b item">second b</li> 
 
<li class="a b item">third a b</li> 
 
<li class="c item ">fourth c</li> 
 
<li class="c b item">fifth c b</li> 
 
</ul>

が、それは動作しません：どうやらそれは常に私が最初にクリックした場合でも、配列の最後の要素へのクリックを認識しています。私が見ることができないjQueryに問題はありますか？

Answer 1

変数xforループが各繰り返しでオーバーライドされるため、別のクロージャー内でロックする必要があります。また、私はconcat()が何をすべきかわからない、私はそれが文字列で使用されて見たことがない。 JavaScriptで+を使ってください:)。

を参照してください、あなたの更新のデモ：https://jsfiddle.net/eddd36ma/1/

for (i = 0; i < tags.length; i++) { 
    (function(x) { 
     $(".show" + x).click(function() { 
      $(".item").hide(); 
      $(".item" + x).show(); 
      $(".filter").text("Tag: " + x) 
     }); 
    })(tags[i]); 
} 

ところで

、引数として関数を受け取りforEach methodもありますので、tag変数は各反復にスコープされているので、それがさらに簡単forよりもそれを使用するようにしたいです：

tags.forEach(function(tag) { 
    $(".show" + tag).click(function() { 
     $(".item").hide(); 
     $(".item" + tag).show(); 
     $(".filter").text("Tag: " + tag) 
    }); 
}); 

参照のデモ：https://jsfiddle.net/eddd36ma/3/

Answer 2

のTh e問題はjQueryではない、問題はロジックとforループです。 OPが気付くと、クリックハンドラは常に驚くべきことではない最後の要素を使用します。クリックの瞬間にループは終了し、最後の要素値はxです。それを解決する正しい方法は、関数内にx=tags[i]をラップすることです。このようなもの。

$(document).ready(function(){ 
 
    $(".showall").click(function(){ 
 
     $(".item").show(); 
 
     $(".filter").text("All elements") 
 
    }); 
 
    var tags = [".a",".b",".c"]; 
 
    
 
    for(i = 0; i < 3; i++) { 
 
    //x=tags[i]; 
 
    (function(x){ 
 
    $(".show".concat(x)).click(function(){ 
 
    \t \t $(".item").hide(); 
 
     $(".item".concat(x)).show(); 
 
     $(".filter").text("Tag: ".concat(x)) 
 
    \t \t }); 
 
    }(tags[i])); 
 
    } 
 
});

.clickable:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
<li class="clickable showall">all</li> 
 
<li class="clickable show a">a</li> 
 
<li class="clickable show b">b</li> 
 
<li class="clickable show c">c</li> 
 
</ul> 
 

 
<h3 class="filter"> 
 
All elements 
 
</h3> 
 
<ul> 
 
<li class="a item">first a</li> 
 
<li class="b item">second b</li> 
 
<li class="a b item">third a b</li> 
 
<li class="c item ">fourth c</li> 
 
<li class="c b item">fifth c b</li> 
 
</ul>

Answer 3

あなたの代わりにこの

の1-代わりのshowallクラス使用showのようなものを試してみて、クラス名のすべてli.show

2 - メイクアレイ用のクリックイベントを行うことができますあなたは持っています

3ループスルーarこのコードを使用すると、var ClassesArray = ["a" , "b" , "c" , "d" , "e" , ....];をしたいとあなたは別のクラスを追加することができますし、 コードが正常に動作します：クラスが設立した場合

$(document).ready(function(){ 
 
    var ClassesArray = ["a" , "b" , "c"]; 
 
    $("li.show").click(function(){ 
 
     for (var i = 0; i < ClassesArray.length; i++){ 
 
      if ($(this).hasClass(ClassesArray[i])){ 
 
       $(".item").hide(); 
 
       $(".item."+ClassesArray[i]).show(); 
 
       $(".filter").text("Tag: "+ ClassesArray[i]); 
 
       break; 
 
      }else{ 
 
       $(".item").show(); 
 
       $(".filter").text("All elements"); 
 
      } 
 
     } 
 
    }); 
 
});

.clickable:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
<li class="clickable show">all</li> 
 
<li class="clickable show a">a</li> 
 
<li class="clickable show b">b</li> 
 
<li class="clickable show c">c</li> 
 
</ul> 
 

 
<h3 class="filter"> 
 
All elements 
 
</h3> 
 
<ul> 
 
<li class="a item">first a</li> 
 
<li class="b item">second b</li> 
 
<li class="a b item">third a b</li> 
 
<li class="c item ">fourth c</li> 
 
<li class="c b item">fifth c b</li> 
 
</ul>

注意rayと破ります。

Answer 4

あなたはこのようにそれを行うことができますあまりにも

HTML：JSFIDDLEで

<ul class="clickableParent"> 
    <li data-tag="selectAll" class="clickable">all</li> 
    <li data-tag="a" class="clickable">a</li> 
    <li data-tag="b" class="clickable">b</li> 
    <li data-tag="c" class="clickable">c</li> 
</ul> 

<h3 class="filter"> 
All elements 
</h3> 
<ul class="filterItemsParent"> 
    <li class="a item">first a</li> 
    <li class="b item">second b</li> 
    <li class="a b item">third a b</li> 
    <li class="c item ">fourth c</li> 
    <li class="c b item">fifth c b</li> 
</ul> 

jQueryの

$(document).ready(function(){ 
    var filterItemsParent = $(".filterItemsParent"); 
    var clickableParent = $(".clickableParent"); 
    var filter = $(".filter"); 


    clickableParent.on("click", ".clickable", function() { 
    var self = $(this); 
    var tag = self.data("tag"); 
    filter.text("Tag: " + tag); 
    tag = (tag !== "selectAll")? "." + tag : ".item"; 
    filterItemsParent.children().hide().end() 
     .children(tag).fadeIn(); 
    }); 
}); 

DEMO！