javascript - 根据图像标题的搜索输入过滤图像

Question

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

我想修改此代码，使其具有相同的功能，但如果可能的话，它会根据图像标题或图像 ID 进行过滤。

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

感谢您的关注!

Answer 1

鉴于您有此标记:

<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">

您可以更改给定代码的这一部分:

$(".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();
    }
});

请记住在您的问题上投入一些时间，提供标记和脚本的总结但有用的版本，让人们像您在自己的系统上一样重现最终结果。