jQuery-搜索图像标题属性 [英] jQuery - Search image title attribute

问题描述

我一直在这里查看此jQuery快速过滤器代码: https://github.com/syropian/jQuery-Quick-Filter

I have been looking at this jQuery quick filter code here: https://github.com/syropian/jQuery-Quick-Filter

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

I'd like to be able to use it to quick filter a list of images, instead of list items as used in the demo.

该演示使用此:

<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>

我想这样做:

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

...

<input type="text" id="txtSearch" placeholder="Filter" />

<div id="list">
    <img src="a.png" width="5" height="5" title="Apples" />
    <img src="a.png" width="5" height="5" title="Oranges" />
    <img src="a.png" width="5" height="5" title="Pineapples" />
    <img src="a.png" width="5" height="5" title="Bananas" />
    <img src="a.png" width="5" height="5" title="Dragonfruit" />
    <img src="a.png" width="5" height="5" title="Peaches" />
    <img src="a.png" width="5" height="5" title="Raspberries" />
    <img src="a.png" width="5" height="5" title="Strawberries" />
    <img src="a.png" width="5" height="5" title="Blueberries" />
    <img src="a.png" width="5" height="5" title="Cantaloupe" />
</div>

就我而言，我希望能够根据图片的title属性进行过滤.

In my case, I'd like to be able to filter based on the image's title attribute.

jQuery快速筛选器代码是这样的:

The jQuery Quick Filter code is this:

(function($){
$.extend($.expr[':'], {missing: function (elem, index, match) {
    return (elem.textContent || elem.innerText || "").toLowerCase().indexOf(match[3]) == -1;
}});
$.extend($.expr[':'], {exists: function(elem, i, match, array){
    return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}});
$.extend($.fn,{
    quickfilter: function(el){
         return this.each(function(){
            var _this = $(this);
            var query = _this.val().toLowerCase();
            _this.keyup(function () {
                query = $(this).val().toLowerCase();
                if(query.replace(/\s/g,"") != ""){
                    $(el+':exists("' + query.toString() + '")').show();
                    $(el+':missing("' + query.toString() + '")').hide();
                }
                else {
                    $(el).show();
                }
            });
        });
    }
});
})(jQuery);

我想知道是否有人能够提供一个指针，说明如何修改它以搜索标题属性?

I wonder if anyone might be able to provide a pointer about how I can modify it to search on the title attributes please?

我意识到该函数使用"innerText"，并搜索<li>列表项之间的内部文本.

I realise the function uses "innerText", and searches on the inner text between the <li> list items.

在这种情况下，它需要搜索属性.

In this case, it's slightly different as it needs to search the attribute.

推荐答案

quickfilter.js仅检查文本内容和内部文本元素.添加条件以检查图像标题即可完成这项工作.在quickfilter.js中按照以下代码添加elem.title

The quickfilter.js checks for elements textcontent and innertext only. Adding a condition to check for image title will do the job. Add elem.title as per below code in quickfilter.js

$.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;
    }
});

这篇关于jQuery-搜索图像标题属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！