按标题属性过滤元素

Question

我正在使用SO- jQuery-搜索图像标题属性中的解决方案。

这是该解决方案的演示：

 /* * Plugin Name: QuickFilter * Author: Collin Henderson (collin@syropia.net) * Version: 1.0 * © 2012, http://syropia.net * You are welcome to freely use and modify this script in your personal and commercial products. Please don't sell it or release it as your own work. Thanks! * Seach images by title https://stackoverflow.com/questions/42530073/jquery-search-image-title-attribute/42531782#42531782 */ (function($){ $.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; }}); $.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); $(document).ready(function(){ $('#txtSearch').quickfilter('#list img'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <div class="container"> <div id="list"> <input id="txtSearch" placeholder="filter" style="border:1px solid silver; display:block; margin:5px;" type="text"> <img title="grapes" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f347.svg" style="width:30px; height:30px"> <img title="watermelon" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f349.svg" style="width:30px; height:30px"> <img title="tangerine" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f34a.svg" style="width:30px; height:30px"> <img title="lemon" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f34b.svg" style="width:30px; height:30px"> <img title="banana" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f34c.svg" style="width:30px; height:30px"> </div> </div> 

该解决方案非常适合根据标题属性搜索图像-作为SO问题状态的标题。

我希望能够基于span元素的title属性进行搜索-例如

<div id="listnature">
    <input type="text" id="txtSearchnature" placeholder="Filter Animals & Nature" class="form-control" />
    <span title="monkey face - 🐵">🐵</span>
    <span title="monkey - 🐒">🐒</span>
    <span title="gorilla - 🦍">🦍</span>
    <span title="dog face - 🐶">🐶</span>
    <span title="dog - 🐕">🐕</span>
    <span title="poodle - 🐩">🐩</span>
    <span title="wolf face - 🐺">🐺</span>
</div>

随着相关JS的更改为：

$(document).ready(function(){
    $('#txtSearchnature').quickfilter('#listnature span');
});

但是-过滤器不起作用，因为JS基于基于图像的title属性进行过滤的解决方案-在这种情况下，我想对跨度的title属性进行过滤。

我想知道是否有可能更改JS以实现该结果？

Answer 1

问题在这一行

return (elem.textContent || elem.innerText || elem.title || "")

它说：

获取textContent ，如果为空，则获取innerText ，如果为空，则获取title ，否则为空字符串。

之间的差span和img是span具有textContent所以它给出textContent （unicode的图像），并尝试以匹配-这失败。

如果您希望首先匹配标题，则可以更改检查顺序：

return (elem.title || elem.textContent || elem.innerText || "")

您将需要执行两次，一次是:missing ，一次是:exists当然，您实际上只需要其中之一，并且默认情况下隐藏/显示。

更新的代码：

 /* * Plugin Name: QuickFilter * Author: Collin Henderson (collin@syropia.net) * Version: 1.0 * © 2012, http://syropia.net * You are welcome to freely use and modify this script in your personal and commercial products. Please don't sell it or release it as your own work. Thanks! * Seach images by title https://stackoverflow.com/questions/42530073/jquery-search-image-title-attribute/42531782#42531782 */ (function($){ $.extend($.expr[':'], {missing: function (elem, index, match) { return (elem.title || elem.textContent || elem.innerText || "").toLowerCase().indexOf(match[3]) == -1; }}); $.extend($.expr[':'], {exists: function(elem, i, match, array){ return (elem.title || 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); $(document).ready(function(){ $('#txtSearchnature').quickfilter('#listnature span'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="listnature"> <input type="text" id="txtSearchnature" placeholder="Filter Animals & Nature" class="form-control" /> <span title="monkey face - 🐵">🐵</span> <span title="monkey - 🐒">🐒</span> <span title="gorilla - 🦍">🦍</span> <span title="dog face - 🐶">🐶</span> <span title="dog - 🐕">🐕</span> <span title="poodle - 🐩">🐩</span> <span title="wolf face - 🐺">🐺</span> </div> 

Answer 2

您可以在给title属性赋予更高优先级的情况下修复它，以更改下一个代码：

(elem.textContent || elem.innerText || elem.title || "")

通过

(elemt.title || elem.textContent || elem.innerText || "")

或以此方式，如果您仅对标题过滤感兴趣

(elemt.title || "")

关于新缺失和存在伪类的定义。

固定代码示例：

 /* * Plugin Name: QuickFilter * Author: Collin Henderson (collin@syropia.net) * Version: 1.0 * © 2012, http://syropia.net * You are welcome to freely use and modify this script in your personal and commercial products. Please don't sell it or release it as your own work. Thanks! * Seach images by title https://stackoverflow.com/questions/42530073/jquery-search-image-title-attribute/42531782#42531782 */ (function($) { $.extend($.expr[':'], {missing: function(elem, index, match) { return (elem.title || elem.textContent || elem.innerText || "").toLowerCase().indexOf(match[3]) == -1; }}); $.extend($.expr[':'], {exists: function(elem, i, match, array) { return (elem.title || 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); $(document).ready(function() { $('#txtSearchnature').quickfilter('#listnature span'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <div id="listnature"> <input type="text" id="txtSearchnature" placeholder="Filter Animals & Nature" class="form-control" /> <span title="monkey face - 🐵">🐵</span> <span title="monkey - 🐒">🐒</span> <span title="gorilla - 🦍">🦍</span> <span title="dog face - 🐶">🐶</span> <span title="dog - 🐕">🐕</span> <span title="poodle - 🐩">🐩</span> <span title="wolf face - 🐺">🐺</span> </div>