基于图像标题的搜索输入过滤图像 [英] Filter images based on search input of image title

问题描述

我有一个搜索输入框，可以过滤通过我的网站上工作的div。

I have a search input box that filters through divs working on my site.

我想修改此代码，使其具有相同的功能，基于图像标题或图像id的过滤器（如果可能的话）。

I would like to adapt this code so that it will have the same functionality but instead filters based on image title or image id if that is possible.

$(document).ready(function () {

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

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

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

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

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

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

感谢您查看！

推荐答案

由于您有此标记：

<input type="text" id="searchfor">

...

<img class="images" title="This_is_image_1">
<img class="images" title="This_is_image_2">
<img class="images" title="This_is_image_3">

您可以更改给定代码的此部分：

You may change this part of the given code:

$(".name").each(function(){

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

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

：

$(".images").each(function(){

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

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

请记住，花一些时间在您的问题上，提供摘要，虽然有用的版本的标记和脚本，让人们在您自己的系统上重现最终结果。

Please keep in mind to invest some time on your questions, providing summarized, though useful version of the markup and script, to let people reproduce the final result as you do on your own system.

这篇关于基于图像标题的搜索输入过滤图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！