Question

我有一个网站一次可以在页面上加载1000多个小图像。页面上没有文字，只有图片。如果我在顶部有一个搜索栏并希望过滤图像并根据文件名或替代文字返回一个..这可能吗？使用Javascript / jQuery？或者是另一种方式？

任何帮助实现这一点都会很棒。

Answer 1

例如，根据照片名称，您可以像这样搜索照片：

var photoName = "photo name";
$('img[src*="'+photoName+'"]').each(function(){
   //Do what you want with the found photos
});

编辑

您可以使用其他图片属性like alt或title

Answer 2

这个working example使用了jQuery contains selector。

标记：

<img alt="abc" src="def.gif" />
<img alt="bcd" src="efg.png" />
<input id="search" type="text" placeholder="Search" />
<div id="results"></div>

JS：

$(function() {
    $('#search').change(function(){
        var s = $(this).val();
        var results = $('img[alt*="' + s + '"],img[src*="' + s + '"]');
        var output = $('<div></div>').append(results.clone());
        $('#results').text(output.html());
    });
});

如果您想在结果中看到图片而不是标记，请将$('#results').text(output.html());更改为$('#results').html(output.html());。请注意，这还将包括以下搜索中的搜索结果。这是working example，显示搜索结果。

Answer 3

您可以使用以下方式获取所有图像元素：

var allImages = document.getElementsByTagName('img');

然后，您可以检查src属性以查找匹配项。

var i;
var search = 'test';
var matches = [];
for (i = 0; i < allImages.length; i+) {
    if (allImages[i].src.indexOf(search) > -1) {
        matches.push(allImages[i]);
    }
}

所以现在你有一系列的比赛。

你可以把它们写在某个地方，比如......

var searchResults = document.getElementById('results');
for (i = 0; i < matches.length; i++) {
    searchResults.appendChild(matches[i]);
}

您不必使用src，您可以使用图片上的任何属性，包括您自己的data-keywords标记，如果您真的想要的话。如果您允许将多个单词作为搜索输入，您可能希望更加聪明。

这是一个处理多个单词的简单示例，可以按任何顺序出现：

var i;
var search = 'test multi word';
var searchTerms = search.split(' ');
var matches = [];

var isMatch = function (haystack, needles) {
    for (var i = 0; i < needles.length; i++) {
        if (haystack.indexOf(needles[i]) === -1) {
            return false;
        }
    }
    return true;
}

for (i = 0; i < allImages.length; i+) {
    if (isMatch(allImages[i].src, searchTerms)) {
        matches.push(allImages[i]);
    }
}

Answer 4

（jQuery的）

好吧，如果你有一个输入字段，

$field.on('keyup', function(evt) {
  $('img:not(
      [src*="' + $(this).val() + '"],
      [src*="' + $(this).attr('alt') + '"]
   )').hide();
});

这可能有用。我没有尝试过，但在我脑海里它会。基本上，它只会隐藏所有不适用于搜索词的内容。

Answer 5

这取决于HTML的结构。

如果图像直接包含在IMG标签（）中，您可以使用以下代码找到它：

$("img").each(function(){
     console.log("ALT: " + $(this).attr("alt"));
     console.log("FILE PATH AND NAME: " + $(this).attr("src"));
});

请注意，无论何时在浏览器中看到图像，都必须是IMG标记。例如，图像可以是CSS类的背景。

在页面上搜索并返回图像

5 个答案: