jQuery根据类搜索并显示图像 [英] Jquery search and display images based on class

问题描述

我希望能够基于类属性(例如厨房")进行搜索和显示.在按班级搜索时，我找不到任何东西，只有文字之类的东西.或者，如果有人对搜索和显示图像的更好方法提出建议.任何帮助将不胜感激.

I'd like to be able to search and display these based on the class attributes, such as "kitchen". I can't find anything on searching by the class, only text and such. Or if anyone has a recommendation on a better way to search and display images. Any help would be greatly appreciated.

<form id="live-search" method="post">
  <fieldset>
    <input type="text" class="text-input" id="filter" />
    <span id="filter-count"></span>
  </fieldset>
</form>

<br/>
<br/>

<div id="gallery">
  <div id="item" class="#1 Category-Home Home">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x150" />

    </a>
  </div>
  <div id="item" class="#2 Category-Kitchen Kitchen">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x150" />

    </a>
  </div>
  <div id="item">
    <div class="#3 Category-Outdoors Outdoors">
      <a id="#image-link" target="_blank" a href="">
        <img class="img_item"><img src="http://placehold.it/150x150" />

      </a>
    </div>

  </div>
  <div id="item" class="#4 Category-Sports Sports">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x150" />

    </a>
  </div>
</div>

$(document).ready(function() {
  $("#filter").keyup(function() {


  });
});

https://jsfiddle.net/sgrg4b06/

推荐答案

我删除了所有ID，但将类添加到div属性中. 以下是有效的解决方案(不区分大小写). 另外，我还稍微更改了您的图片，因为您可以看到差异.

I removed all id, but added classes into divs attr. Below is working solution (case insensitive). Also I changed Your images a little bit, for You can see difference.

$(document).ready(function() {
  var images = $(".item") //contain all unfiltered images
  $("#filter").on("change paste keyup", function(){
  	$.each(images, function(i, l){
  		$(l).hide();
  	}); //hide all images
  	searchValue = $("#filter").val(); //get entered value of input field
    searchValueRE = new RegExp(searchValue, "i"); //convert search value into RegExp
    output = $.grep(images, function (n) {return searchValueRE.test(n.className); }); //Returns array that matches input value
    $.each(output, function(i, l){
  		$(l).show();
  	}); //show matched images
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="live-search" method="post">
  <fieldset>
    <input type="text" class="text-input" id="filter" />
    <span id="filter-count"></span>
  </fieldset>
</form>

<br/>
<br/>

<div id="gallery">
  <div class="item #1 Category-Home Home">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x151" />

    </a>
  </div>
  <div class="item #2 Category-Kitchen Kitchen">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x152" />

    </a>
  </div>
    <div class="item #3 Category-Outdoors Outdoors">
      <a id="#image-link" target="_blank" a href="">
        <img class="img_item"><img src="http://placehold.it/150x153" />

      </a>
    </div>
  <div class="item #4 Category-Sports Sports">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x154" />

    </a>
  </div>
</div>

这篇关于jQuery根据类搜索并显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！