Question

我正在使用SO的解决方案-jQuery - Search image title attribute。

这是该解决方案的演示：

/*
 * 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 || "")

有关新的 missing 和存在的伪类的定义。

固定代码示例：

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

按标题属性过滤元素

2 个答案: