html内で表示されているリストの表示を、検索の入力内容によって変動させたいのですが、jqueryのonclick時にaddClassが効いてくれません。
$('.serch-btn').click(function(){}
の外で、$('.animal li').addClass('hidden');を実行すると、
うまくいきます。
下のコードで、何かおかしい部分ありますでしょうか?
ご教示ください。
html
1<body> 2 <div class="container"> 3 <form> 4 <div class="input-group"> 5 <input type="text" class="form-control serch" placeholder="検索"> 6 <span class="input-group-btn"> 7 <button class="btn btn-default serch-btn" type="submit"> 8 <i class='glyphicon glyphicon-search'></i> 9 </button> 10 </span> 11 </div> 12 </form> 13 <ul class="animal"> 14 <li>豚</li> 15 <li>牛</li> 16 <li>犬</li> 17 <li>猫</li> 18 <li>ネズミ</li> 19 </ul> 20 21 <div class="list"> 22 </div> 23 24 25 </div> 26 27</body>
js
1$(function(){ 2 $('.serch-btn').click(function(){ 3 4 var serch = $(".serch"); 5 searchText = serch.val(); 6 7 $('.animal li').each(function() { 8 9 var targetText = $(this).text(); 10 11 // 検索対象となるリストに入力された文字列が存在するかどうかを判断 12 if (targetText.indexOf(searchText)) { 13 // alert(sertchText); 14 $('.animal li').removeClass('hidden'); 15 } else {//存在する 16 alert(sertchText); 17 $('.animal li').addClass('hidden'); 18 } 19 }); 20 }); 21 22}); 23
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/15 11:05
2017/12/15 11:13
2017/12/15 11:18
2017/12/15 11:23
2017/12/15 11:30