搜索栏不能在JQuery中工作

-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>

来源

2017-04-11 Doc Green

请为我们提供html代码。如果你建立一个笨蛋或类似的东西，这将是非常有用的。 https://plnkr.co/edit/ –

嗨文档，欢迎来到堆栈溢出。我们需要查看代码的其余部分。寻求调试帮助的问题（“为什么这个代码不工作？”）必须包含所需的行为，特定的问题或错误以及在问题本身中重现问题所需的最短代码。请参阅：如何创建[mcve] –

对于这种简单化的东西，plnkr，jsFiddle，codepen等几乎不需要。只需使用在线网页片段工具即可。 – Santi

您的页面上可能有多个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不存在，它将不会显示。

来源

2017-04-11 19:22:22 McHat

如果这实际上OP正在试图做的事 - 隐藏基于ID的类“.gali”的元素，循环几乎不需要。 – Santi

'$（“.gali”）。hide（）; $（“＃”+ id）.show（）;' – Barmar

^我想到的确切解决方案。尽管我对使用'$（“.gali”）。attr（“id”）“尝试获取'id'OP'有点好奇。 – Santi

搜索栏不能在JQuery中工作

回答

相关问题