JQuery搜索过滤器代码我错过了什么步骤

Question

我已经将教程中的步骤应用到我自己的图片库搜索栏中。目的是让搜索栏实时过滤图像，并显示与图库中搜索栏中描述的匹配的图像。代码的第一部分可以工作(当写入搜索栏时，图库会隐藏)，但其余部分还不能。我的html是用<a>标记构建的，在教程中他们没有。我试过在JQuery代码中添加这些，但没有运气。有人知道我错在哪里了吗?

<div id="photo-container" class="data-list">
     <ul>
        <li data-keywords="dry hill"><a href="Photos/01.jpg"><img     src="Photos/Thumbnails/01.jpg" alt="Photo of a dry hill with blue skys.  This image was captured at the end of Summer in the region of Hawkes Bay." title="Dry Hill" class="photo photo1">
               </a></li>
             <li data-keywords="lake blue sky"><a href="Photos/02.jpg"><img src="Photos/Thumbnails/02.jpg" alt="Photo of a lake with blue sky.  This image was taken in the mid morning of the Lakes District. " title="Lake" class="photo">
                 </a></li>
             <li data-keywords="green fields"><a href="Photos/03.jpg"><img src="Photos/Thumbnails/03.jpg" alt="Green Fields is an image captured in the lush Southland area. " title="Photo Three" class="Green Fields">
                 </a></li>
     </ul>
    </div><!--closing photo-container-->

Jquery代码

$(document).ready(function(){
$("#search").keyup(function(){
var current_query = $("#search").val();
if(current_query != ""){
 $("#photo-container").hide();
 $("#photo-container li").each(function(){
     var current_keyword = $(this).attr("data-keywords");
    if (current_keyword.indexOf(current_query) >=0) {
        $(this).show();
    } 
      });
} else {
        $("#photo-container li").show();
    }


 });  
});

Answer 1

您的代码正在查找所有<a>元素并查找它们的'data-keywords'属性，但'data-keywords'属性在<li>元素上。

从

中的css选择器中删除<a>

$("#photo-container li a").each(function(){

或将'data-keywords'标签移至<li>元素