如何按图像源搜索/过滤？

Question

我正在尝试创建一个可以按图像的源名称过滤的页面。

我找到了这个脚本，但它只适用于文本：http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

小提琴：jsfi ddle.net/sVJRk/

我需要按图片来源过滤什么？见：jsfi ddle.net/sVJRk/1/

任何建议都会很棒！

Answer 1

在回答标题中提出的问题时，attribute contains selector 就是您要查找的内容：

$('img[src*="sport"]')

这将选择所有images，其中src 属性包含sport。

---

具体到你的问题，有很多问题：

1. 您正在将 $('#list') 传递给 listFilter 函数，但您没有包含该 id 的元素。
2. 然后你在你的函数体中调用$(list)，你已经将list作为一个jQuery对象传递了，所以不需要再次包装它。
3. 您正在寻找包含给定字符串的anchors，但您的列表中没有任何anchors（您有images）。
4. 如果您只需要检查字符串是否包含在image 的src 中，则不需要自定义:Contains 选择器（可以使用attribute contains selector）。

Here's a working fiddle with the above changes

Answer 2

Jquery contains filter 是您正在寻找的答案。 轻量版可以在这里找到：http://jsfiddle.net/artuc/vTQq3/

$('input').on('keyup', function(){
$('.imageList img').not('[src*="'+$(this).val()+'"]').hide();
$('.imageList img[src*="'+$(this).val()+'"]').show();
});