Question

我正在尝试制作我的搜索框，过滤我网站上的几张图片。因此，如果我在搜索框中输入全息图，其余图像应该变暗。我可以在这个网站上查看我想要做的事情：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();
     }
    });
 });
});

Answer 1

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

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

     // Show the div item if the phrase matches 
 }

Answer 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();
}

Answer 3

您的原始代码运行正常。您需要确保在网页中加入jQuery库。

请务必在<head>代码中加入此内容。这将确保添加jQuery库，并允许您的函数工作。

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

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

3 个答案: