使用jQuery .filter()按多个标准过滤

我有我要通过其数据属性过滤的div。第一个过滤器是由数据标签属性通过文本输入过滤的。我要实现的第二个过滤器是通过数据标签属性。数据标签的一个示例是：data-tags =" JS，PHP，CSS"

用户单击标签按钮时，该标签将添加到标签数组中。我希望能够通过属性，数据标签和数据标签来过滤DIVS。

这是样本div

<div id="work-card-0" class="work-card col-md-3 text-center" data-title="Test project" data-tags="js,php,css" style=""><img class="work-img img-responsive" src="images/skier.png"><h3 class="work-title">Test project</h3><p class="work-p">This is a sample project</p><a class="btn btn-primary" href="http://google.com" target="_blank">View</a></div>

这是jQuery

    $(document).ready(function() {
  $.getJSON('work.json', function(data) {
   $.each(data, function(key, value) {
    $.each(value, function(k, v) {
     $("#work-section").append("<div id='work-card-" + v.id + "' class='work-card col-md-3 text-center' data-title='" + v.title + "' data-tags='" + v.tag + "'><img class='work-img img-responsive' src='" + v.image + "'><h3 class='work-title'>" + v.title + "</h3><p class='work-p'>" + v.desc + "</p><a class='btn btn-primary' href='" + v.link + "' target='_blank'>View</a></div>");
    });
   });
  });

  $("#filter").on('keyup', function() {
   $("#filter-form").submit();
  });
  var tags = [];
  $(".tag").on('click', function() {
   var tag = $(this).attr('value');
   if (tags.indexOf(tag) == -1) tags.push(tag);
   getTags();
  });
  function getTags() {
   $("#tag-holder ul").empty();
   for (var i = 0; i < tags.length; i++) {
    $("#tag-holder ul").append("<li value='" + i + "'>" + tags[i] + "</li>");
   }
  }
  //remove tags
  $("#tag-holder ul").on('click', 'li', function() {
   var tag = $(this).attr('value');
   tags.splice(tag, 1);
   getTags();
  });
  $("#filter-form").on('submit', function(e) {
   e.preventDefault();
   getTags();
   var search = $("#filter").val();
   $.ajax({
    url: 'work.html'
   }).done(function() {
    $(".work-card").hide();
    $(".work-card").filter(function() {
     return ($(this).data('title').toLowerCase().indexOf(search.toLowerCase()) > -1);
    }).filter(function() {
     // filter here by tag
    }).show();
   });
  });

  $("#reset-btn").on('click', function() {
   $("#filter").val("");
   tags = [];
   getTags();
   $(".work-card").show();
  });
 });

滤波器形式具有标签的输入和所有按钮。提交时，DIV被过滤。标题过滤器有效。我还能通过数据标签过滤。我希望过滤器通过两个数据属性过滤

这不是最有效的方法，因为 jquery 中的过滤器很棒，但这是一个简单的解决方案，我认为很快就可以帮助您...

$(document).ready(function() {
	var searchedTags = ["html", "js"];
	
	$(".work-card").hide();
	$(".work-card").filter(function() {
		return ($(this).data('title').toLowerCase().indexOf("test") > -1);
	}).filter(function() {
		var result = false;
		var tags = $(this).data("tags").split(",");
		if (searchedTags && tags && (tags instanceof Array)) {
			for(var i in searchedTags) {
				var searchedTag = (searchedTags[i]).toLowerCase();
				console.log("  Searched Tag: " + searchedTags[i]);
				result = result || ($.inArray(searchedTags[i], tags) != -1);
			}
		}
		return result;
	}).show();
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
<div id="work-card-0" class="work-card col-md-3 text-center" data-title="Test project 1" data-tags="css" style=""><h3 class="work-title">Test project 1 (css)</h3><p class="work-p">This is a sample project</p><a class="btn btn-primary" href="http://google.com" target="_blank">View</a></div>
<div id="work-card-1" class="work-card col-md-3 text-center" data-title="Test project 2" data-tags="css,js" style=""><img class="work-img img-responsive" src="images/skier.png"><h3 class="work-title">Test project 2 (css/js)</h3><p class="work-p">This is a sample project</p><a class="btn btn-primary" href="http://google.com" target="_blank">View</a></div>
<div id="work-card-2" class="work-card col-md-3 text-center" data-title="Test project 3" data-tags="php,html" style=""><img class="work-img img-responsive" src="images/skier.png"><h3 class="work-title">Test project 3 (php/html)</h3><p class="work-p">This is a sample project</p><a class="btn btn-primary" href="http://google.com" target="_blank">View</a></div>
<div id="work-card-3" class="work-card col-md-3 text-center" data-title="Test project 4" data-tags="php,html" style=""><img class="work-img img-responsive" src="images/skier.png"><h3 class="work-title">Test project 4 (js)</h3><p class="work-p">This is a sample project</p><a class="btn btn-primary" href="http://google.com" target="_blank">View</a></div>
</body>
</html>

使用 jQuery 自定义过滤器的有趣征用，我认为可以改进过滤器实现，但现在太累了，无法现在这样做：

$(document).ready(function() {
  var searchedTags = ["js", "css"];
  $.expr[':'].jobWorkFilter = function(elem, index, match) {
    var result = false;
		var tags = $(elem).data("tags").split(",");
		if (searchedTags && tags && (tags instanceof Array)) {
			for(var i in searchedTags) {
				var searchedTag = (searchedTags[i]).toLowerCase();
				console.log("  Searched Tag: " + searchedTags[i]);
				result = result || ($.inArray(searchedTags[i], tags) != -1);
			}
		}
		return result;
  };
    
  $(".work-card")
    .hide()
    .filter(".work-card[data-title*='Test']:jobWorkFilter()")
    .show();
    
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="work-card-0" class="work-card col-md-3 text-center" data-title="Test project 1" data-tags="css" style=""><h3 class="work-title">Test project 1 (css)</h3><p class="work-p">This is a sample project</p><a class="btn btn-primary" href="http://google.com" target="_blank">View</a></div>
<div id="work-card-1" class="work-card col-md-3 text-center" data-title="Test project 2" data-tags="css,js" style=""><img class="work-img img-responsive" src="images/skier.png"><h3 class="work-title">Test project 2 (css/js)</h3><p class="work-p">This is a sample project</p><a class="btn btn-primary" href="http://google.com" target="_blank">View</a></div>
<div id="work-card-2" class="work-card col-md-3 text-center" data-title="Test project 3" data-tags="php,html" style=""><img class="work-img img-responsive" src="images/skier.png"><h3 class="work-title">Test project 3 (php/html)</h3><p class="work-p">This is a sample project</p><a class="btn btn-primary" href="http://google.com" target="_blank">View</a></div>
<div id="work-card-3" class="work-card col-md-3 text-center" data-title="Test project 4" data-tags="php,html" style=""><img class="work-img img-responsive" src="images/skier.png"><h3 class="work-title">Test project 4 (js)</h3><p class="work-p">This is a sample project</p><a class="btn btn-primary" href="http://google.com" target="_blank">View</a></div>
</body>
</html>

相关内容

最新更新

热门标签：