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()将隐藏或显示所有此类元素。

为避免这种情况，您可以实现循环并单独检查每个class="gali"元素：

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

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

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

使用此代码，如果您的ID不存在，则无法显示。

搜索栏不在JQuery中工作

1 个答案: