jQuery-搜索图像标题属性
[英]jQuery - Search image title attribute
问题描述
我一直在这里查看此jQuery快速过滤器代码： https ： //github.com/syropian/jQuery-Quick-Filter
我希望能够使用它来快速过滤图像列表，而不是演示中使用的列表项。
演示使用以下方法：
<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属性进行过滤。
jQuery快速筛选器代码是这样的：
(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);
我想知道是否有人能够提供有关如何修改它以搜索标题属性的指针？
我意识到该函数使用“ innerText”，并搜索<li>列表项之间的内部文本。
在这种情况下，它需要搜索属性，因此略有不同。
5 个解决方案
解决方案1
2 已采纳 2017-03-01 12:28:57
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;
}
});
解决方案2
1 2017-03-01 11:16:12
这不行吗？
<script type="text/javascript">
$(document).ready(function(){
$('#txtSearch').quickfilter('#list img[title="Apples"]');
});
</script>
解决方案3
1 2017-03-01 11:33:21
替换为：
return (elem.textContent || elem.innerText || "")
有了这个：
return (elem.getAttribute('title') || "")
SNIPPET
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> <title>00A00</title> <style> li { height: 150px; margin: 15px 0; } img { transform: translateY(75px) } </style> </head> <body> <header> </header> <section> <input type="text" id="txtSearch" placeholder="Filter"> <ol id="list"> <li class='slide'><img src='http://placehold.it/150x150/000/fff?text=Apples' title="Apples"></li> <li class='slide'><img src='http://placehold.it/150x150/00f/eee?text=Oranges' title="Oranges"></li> <li class='slide'><img src='http://placehold.it/150x150/0e0/111?text=Pineapples' title="Pineapples"></li> <li class='slide'><img src='http://placehold.it/150x150/f00/fff?text=Bananas' title="Bananas"></li> <li class='slide'><img src='http://placehold.it/150x150/fc0/000?text=Dragonfruit' title="Dragonfruit"></li> <li class='slide'><img src='http://placehold.it/150x150/fff/000?text=Peaches' title="Peaches"></li> </ol> </section> <footer> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script> (function($) { $.extend($.expr[':'], { missing: function(elem, index, match) { return (elem.getAttribute('title') || "").toLowerCase().indexOf(match[3]) == -1; } }); $.extend($.expr[':'], { exists: function(elem, i, match, array) { return (elem.getAttribute('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> </body> </html>
解决方案4
0 2017-03-01 11:32:47
没有快速过滤器
$('#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();
}
});
});
解决方案5
0 2017-03-01 12:30:00
我认为将选择器更改为您的情况应该有效：
$('#txtSearch').quickfilter('#list img');
如果没有，请在下面的评论部分中尝试使用小提琴。
如何使用 jQuery 将图像“标题”属性值获取到另一个元素中
[英]How to get the Image "title" attribute value into another element using jQuery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.