2017-04-11 102 views
-1

我用JQuery創建了一個簡單的搜索欄,問題在於它隱藏了一切,即使當我輸入了正確的名稱,並且由於某種原因,當我刪除它不返回的輸入時隱藏的物品。搜索欄不能在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> 
+3

請爲我們提供html代碼。如果你建立一個笨蛋或類似的東西,這將是非常有用的。 https://plnkr.co/edit/ –

+0

嗨文檔,歡迎來到堆棧溢出。我們需要查看代碼的其餘部分。尋求調試幫助的問題(「爲什麼這個代碼不工作?」)必須包含所需的行爲,特定的問題或錯誤以及在問題本身中重現問題所需的最短代碼。請參閱:如何創建[mcve] –

+0

對於這種簡單化的東西,plnkr,jsFiddle,codepen等幾乎不需要。只需使用在線網頁片段工具即可。 – Santi

回答

0

您的頁面上可能有多個class="gali"元素。

$('.gali').hide()$('.gali').show()將隱藏或顯示所有這些元素。

爲了避免這種情況,你可以實現一個循環,並檢查單獨每class="gali"元素:

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

編輯:或者,正如桑蒂下面表明,有一個更好的解決辦法:隱藏所有class="gali"元素,然後顯示一個有問題的id。

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

使用此代碼,如果您的ID不存在,它將不會顯示。

+0

如果這實際上OP正在試圖做的事 - 隱藏基於ID的類「.gali」的元素,循環幾乎不需要。 – Santi

+4

'$(「.gali」)。hide(); $(「#」+ id).show();' – Barmar

+0

^我想到的確切解決方案。儘管我對使用'$(「.gali」)。attr(「id」)「嘗試獲取'id'OP'有點好奇。 – Santi