jQuery过滤多个类,匹配,隐藏div

时间:2015-09-27 20:08:14

标签: javascript jquery html css

我有多个divs的课程.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">
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:4)

  

注意:您不能在类名中使用dot,并且应该在将这些名称放入dom之前解析这些名称以使用-_之类的其他字符

您未在filter()

内返回任何内容

修复过滤器:

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

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

一种非常简单的方法是:

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

Demo with valid class names