検索バーがJQueryで機能していない

Question

JQueryを使用して単純に検索バーを作成しましたが、正しい名前を入力しても何も表示されない入力を削除しても、隠しアイテム。

ご協力いただければ幸いです。

$("#search").keyup(function(){ 
    var uInput = $("#search").val(); 
    var id = $(".gali").attr("id"); 
    if (uInput != id){ 
     $(".gali").hide(); 
    } else { 
     $(".gali").show(); 
    } 
}); 

    <div id="container"> 
     <div id="search-bar"> 
      <input type="text" placeholder="Search..." id="search"> 
     </div> 

     <ul id="pList"> 
      <li class="gali"> 
       <img src="phot/plum01.jpg" class="pimg"> 
      </li> 
      <li class="gali"> 
       <img src="phot/plum02.jpg" class="pimg"> 
      </li> 
      <li class="gali" id="flowers"> 
       <img src="phot/plum03.jpg" class="pimg"> 
      </li> 
      <li class="gali"> 
       <img src="phot/plum04.jpg" class="pimg"> 
      </li> 
      <li class="gali" id="flowers"> 
       <img src="phot/plum05.jpg" class="pimg"> 
      </li> 
      <li class="gali" id="flowers"> 
       <img src="phot/plum06.jpg" class="pimg"> 
      </li> 
      </ul> 

Answer 1

あなたのページに複数のclass="gali"要素がある可能性があります。

$('.gali').hide()および$('.gali').show()は、そのような要素をすべて隠すか、または表示します。

$('.gali').each(function(){ 
    var $this = $(this); 
    if($this.attr('id') == uInput.val()) { 
     $this.show(); 
    } else { 
     $this.hide(); 
    } 
}); 

EDIT：：または、サンティは、以下のとおり、よりよい解決策があります：すべてのclass="gali"の要素を隠し、次に示して、このあなたがループを実装し、個別にすべてのclass="gali"要素を確認することができますを避けるために

問題のIDを持つもの

$(".gali").hide(); 
$("#"+id).show(); 

このコードでは、IDが存在しない場合は表示されません。