搜索栏不在JQuery中工作

时间:2017-04-11 19:11:14

标签: jquery html css search frontend

我使用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>

1 个答案:

答案 0 :(得分: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();
    }
});

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

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

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