根据图像名称的搜索输入过滤图像答案

【问题标题】：Filter images based on search input of image name根据图像名称的搜索输入过滤图像
【发布时间】：2016-04-16 00:19:14
【问题描述】：

我正在尝试制作我的搜索框，过滤我网站上的几张图片。所以如果我在搜索框中输入omniknight，其余的图像应该会变暗。我正在尝试做的事情可以在这个网站上查看：http://dotaedge.com/。我已经尝试过这个问题的答案：Filter images based on search input of image title 但不起作用。

鉴于我有这个标记：

<input type="text" placeholder="Enter hero name here" id="search">

<a id="Hero-7" class="hero" hero-id="7" href="#" hero-uri="rattletrap" hero-name="Clockwerk">
        <img class="hero-img-small" src="Dota-Heroes-Small/rattletrap_sb.png">
        <div class="hero-action">
            <img class="hero-img-large" src="Dota-Heroes-Hover/rattletrap_hphover.png">
        </div>
    </a>

<a id="Hero-8" class="hero" hero-id="8" href="#" hero-uri="omniknight" hero-name="Omniknight">
        <img class="hero-img-small" src="Dota-Heroes-Small/omniknight_sb.png">
        <div class="hero-action">
            <img class="hero-img-large" src="Dota-Heroes-Hover/omniknight_hphover.png">
        </div>
    </a>

<a id="Hero-9" class="hero" hero-id="9" href="#" hero-uri="huskar" hero-name="Huskar">
        <img class="hero-img-small" src="Dota-Heroes-Small/huskar_sb.png">
        <div class="hero-action">
            <img class="hero-img-large" src="Dota-Heroes-Hover/huskar_hphover.png">
        </div>
    </a>

我正在尝试使用以下代码过滤图像：

$(document).ready(function () {

$(".hero-name").hide();

$("#search").keyup(function(){

    // Retrieve the input field text 
    var filter = $(this).val();

    // Loop through the captions div 
   $(".hero").each(function(){

     // If the div item does not contain the text phrase fade it out
     if ($(this).attr('hero-name').search(new RegExp(filter, "i")) < 0) {
            $(this).fadeOut();

     // Show the div item if the phrase matches 
     } else {
     $(this).show();
     }
    });
 });
});

【问题讨论】：

它工作...检查你的控制台，你有任何错误吗？
Uncaught ReferenceError: $ is not defined (16:54:53:687 | error, javascript) at (anonymous function) (HeroBuilder.php:23:10)
这意味着您没有正确地将jQuery 添加到您的网页。确保您的<head> 标签中有<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
非常感谢，这让它在一定程度上发挥了作用。正在修复它！
没问题。请记住，jQuery 本质上是类固醇上的 Javascript，但您需要确保在您的网页中包含 jQuery 库

标签： jquery html

【解决方案1】：

您的原始代码运行良好。您需要确保在您的网页中包含 jQuery 库。

请务必将其包含在您的 <head> 标记中。这将确保添加了 jQuery 库，并允许您的函数工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>‌

【讨论】：

【解决方案2】：

使用 indexOf 检查 filter 是否存在于元素的 hero-name 属性中

// Loop through the captions div 
$(".hero").each(function(){

// If the div item does not contain the text phrase fade it out
if (!$(this).attr('hero-name').indexOf(filter) > -1) {
    $(this).fadeOut();

// Show the div item if the phrase matches 
} else {
    $(this).show();
}

【讨论】：

【解决方案3】：

您可以使用 javascript indexOf 函数在字符串中搜索子字符串。试试这个

if ($(this).attr('hero-name').indexOf(filter) < 0) {
        $(this).fadeOut();

     // Show the div item if the phrase matches 
 }

【讨论】：

indexOf其实是一个Javascript函数！