搜索栏在 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()and$('.gali').show()将隐藏或显示所有此类元素。

为避免这种情况，您可以实现一个循环并单独检查 everyclass="gali"element：

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

编辑：或者，正如 Santi 在下面建议的那样，有一个更好的解决方案：隐藏所有class="gali"elements，然后显示有问题的 id。

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

使用此代码，如果您的 id 不存在，则根本不会显示。