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

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. 如果您只需要检查:Contains的{​​{1}}中是否包含字符串，则不需要自定义src选择器（您可以使用attribute contains selector ）。

Here's a working fiddle with the above changes

Answer 2

Jquery包含过滤器是您正在寻找的答案。 可在此处找到简易版：http://jsfiddle.net/artuc/vTQq3/

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