Question

我有div想要按其数据属性进行过滤。第一个过滤器是data-title属性，它由文本输入过滤。我想实现的第二个过滤器是data-tags属性。 data-tags的一个例子是：data-tags =“js，php，css”

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

这是一个示例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被过滤掉。标题过滤器有效。我怎样才能按数据标签过滤。我希望过滤器按数据属性

进行过滤

Answer 1

这不是最有效的方法，因为 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 自定义过滤器的一个有趣的approch，我认为过滤器实现可以改进但现在太累了，不能这样做：

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

使用jquery .filter（）按多个条件进行过滤

1 个答案: