2

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

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

4

5 回答 5

3

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

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

编辑

您可以使用其他图像属性likealt 或title

于 2012-12-19T19:42:12.973 回答
2

这个工作示例使用了 jQuery包含选择器。

标记：

<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());. 请注意，这还将包括以下搜索中的搜索结果。这是一个显示搜索结果的工作示例。

于 2012-12-19T19:51:00.907 回答
1

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

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]);
    }
}
于 2012-12-19T19:40:24.110 回答
0

(jQuery)

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

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

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

于 2012-12-19T19:44:15.243 回答
0

这取决于 HTML 的结构。

如果图像直接包含在 IMG tags() 中，您可以使用如下代码找到它：

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

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

于 2012-12-19T20:28:20.573 回答