I have several divs with the class .item.
When the user clicks on the Classfilter submit button, all .item elements that also have at least one class from the dateClasses array (for example ['28.09.2015', '29.09.2015']) should be hidden.
To clarify, the elements with the green border should be hidden when the button is clicked.
Important: The values in the dateClasses array may change dynamically, and I need to check against an array.
$(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 of 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">