Javascript jQuery-搜索图像标题属性

我一直在这里查看jQuery快速筛选代码：

我希望能够使用它来快速过滤图像列表，而不是演示中使用的列表项

演示使用以下内容：

<script type="text/javascript">
    $(document).ready(function(){
        $('#txtSearch').quickfilter('#list li');
    });
</script>

...

<input type="text" id="txtSearch" placeholder="Filter" />
<ul id="list">
    <li>Apples</li>
    <li>Oranges</li>
    <li>Pineapples</li>
    <li>Bananas</li>
    <li>Dragonfruit</li>
    <li>Peaches</li>
    <li>Raspberries</li>
    <li>Strawberries</li>
    <li>Blueberries</li>
    <li>Cantaloupe</li>
</ul>

我想知道是否有人能提供一个指针，告诉我如何修改它来搜索标题属性

我意识到该函数使用“innerText”，并在

列表项之间搜索内部文本

在本例中，由于需要搜索属性，所以略有不同。

不带quickfilter

$('#txtSearch').keyup(function (e) {
    var query = $(this).val().toLowerCase();
    $('#list img').each(function (index) {
        if ($(this).attr('title').toLowerCase().indexOf(query) == -1) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

替换此项：

为此：

片段

00A00
李{
高度：150像素；
利润率：15px0；
}
img{
变换：translateY（75px）
}






（函数（$）{
$.extend（$.expr['：']{
缺少：函数（元素、索引、匹配）{
return（elem.getAttribute（'title'）| |“”）.toLowerCase（）.indexOf（match[3]）=-1；
}
});
$.extend（$.expr['：']{
存在：函数（元素、i、匹配、数组）{
return（elem.getAttribute（'title'）| |''）.toLowerCase（）.indexOf（（匹配[3]| |“”）.toLowerCase（））>=0；
}
});
$.extend（$.fn{
快速过滤器：功能（el）{
返回此值。每个（函数（）{
var_this=$（this）；
var query=_this.val（）.toLowerCase（）；
_this.keyup（函数（）{
query=$（this.val（）.toLowerCase（）；
if（query.replace（/\s/g，“”）！=“”）{
$（el+'：存在（“+query.toString（）+'”）.show（）；
$（el+'：缺少（“+query.toString（）+'”）.hide（）；
}否则{
$（el.show（）；
}
});
});
}
});
})（jQuery）；
$（文档）.ready（函数（）{
$（'#txtSearch'）.quickfilter（'#list img'）；
});

quickfilter.js仅检查元素textcontent和innertext。添加检查图像标题的条件将完成此工作。根据quickfilter.js中的以下代码添加elem.title

$.extend($.expr[':'], {
    missing: function (elem, index, match) {
        return (elem.textContent || elem.innerText || elem.title || "").toLowerCase().indexOf(match[3]) == -1;
    }
});
$.extend($.expr[':'], {
    exists: function (elem, i, match, array) {
        return (elem.textContent || elem.innerText || elem.title || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

---

我认为将选择器更改为您的案例应该有效：

$('#txtSearch').quickfilter('#list img');

---

如果没有，请在下面的评论部分提供您的试用版。

快速筛选

只查找文本内容。它不是那么大，只需阅读代码，并创建一个克隆它的工作，而不是标题！将这一行

return（elem.textContent | | | elem.innerText | | | |“”）更改为
Quick Filter
code中的low…
return（elem.getAttribute（'title'）| |“”）。toLow…
！这是一个很好的解决方案，它保留了原有的功能和更新的功能。
return (elem.textContent || elem.innerText || "")

return (elem.getAttribute('title') || "")

$.extend($.expr[':'], {
    missing: function (elem, index, match) {
        return (elem.textContent || elem.innerText || elem.title || "").toLowerCase().indexOf(match[3]) == -1;
    }
});
$.extend($.expr[':'], {
    exists: function (elem, i, match, array) {
        return (elem.textContent || elem.innerText || elem.title || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

$('#txtSearch').quickfilter('#list img');