javascript - 如何在没有数据库的情况下实现图片搜索功能

Question

您好，我正在尝试编写一个代码，允许用户搜索书名并只显示具有该特定名称的那本书。但是由于某些原因搜索功能不起作用

到目前为止，这是我的代码:

      var search = $("#search-criteria");
  var items  = $(".image-wrap");

  $("#search").on("click", function(e){

       var v = search.val().toLowerCase();
      if(v == "") {
          items.show();
          return;
      }
       $.each(items, function(){
           var it = $(this);
           var lb = it.find("id").text().toLowerCase();
           console.log( lb + " --- " + v);
           if(lb.indexOf(v) == -1)
                it.hide();
       });
   });
});

  .review-img {
  cursor: pointer;
  height: 160px; // height
  //width: 30%; // width
  }

    <form>
          <div> <input type="text" id="search-criteria" id="searchText"/>
    <input type="button" id="search" value="search" onClick="tes();"/> </div>
         </form>

    <section class='images'>
<img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img>
<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner"></img>    
<img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars"></img>
<img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight"></img>
</section>

Answer 1

作为脚本的一部分，有一些更改需要完成

<script type="text/javascript">    
    $(document).on("click","#search",function(e){
           var search = $("#search-criteria");
           var items  = $(".review-img");
           var v = search.val().toLowerCase();
           if(v == "") {
              items.show();
              return;
           }
           $.each(items, function(){
               var it = $(this);
               var lb = it.attr("id").toLowerCase();
               console.log( lb + " --- " + v);
               if(lb===v)
                    it.show();
                else
                    it.hide();
           });

      });
    </script>

这应该可以正常工作。同时从输入按钮中删除 onClick，因为我们将根据按钮的 id 执行搜索。

如果您需要关于此代码的任何其他说明，请问我