javascript - 用于多个类的 jQuery 过滤器，在匹配时隐藏 div

Question

我有多个 div 类 .item。 单击Classfilter-提交按钮所有.item-元素，这些元素也至少有一个类存储在dateClasses-数组中(例如['28.09.2015', '29.09.2015']), 应该被隐藏。

回顾一下，当用户点击按钮时，带有绿色边框的元素应该被隐藏。

重要提示:dateClasses 数组值可能会动态变化。而且我必须检查一个数组。

$(document).ready(function() {
	  classFilter();
	});


	function classFilter() {
	  $('#filter').click(function(e) {
	    e.preventDefault();

	    var dateClasses = ['28.09.2015', '29.09.2015']; //Hide the item-div if one these classes is applied

	    $('.item').filter(function() {
	      $(this).hasClasses(dateClasses)
	    }).addClass('hide-event');
	  });
	}

	$.fn.extend({
	  hasClasses: function(selectors) {
	    var self = this;
	    for (var i in selectors) {
	      console.log($(self).hasClass(selectors[i]));
	      if ($(self).hasClass(selectors[i])) {
	        return true;
	      }
	    }
	    return false;
	  }
	});

.hide-event {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item 28.09.2015" style="border: 10px solid green">
  Hide this if class is in array</div>
<div class="item 29.09.2015" style="border: 10px solid green">
  Hide this if class is in array</div>
<div class="item 30.09.2015" style="border: 10px solid blue">
  Hide this if class is in array</div>
<input type="submit" name="filter" value="Classfilter" id="filter">

Answer 1

NOTE: You can't use dot in a classname and should parse those names to use another character like - or _ before they get put into the dom

您没有在 filter() 中返回任何内容

修复过滤器:

$('.item').filter(function() {
     return  $(this).hasClasses(dateClasses);
}).addClass('hide-event');

可能有更简单的方法来实现你想要的，但这是代码显示的根本问题，无需重写你的插件

一个非常简单的方法是:

$('.item').filter('.' + dateClasses.join(',.')).addClass('hide-event');

Demo with valid class names