[英]jQuery multiple selector with overruling
I have a list of div's I want to filter with 2 groups of checkboxes: Type
and Category
. 我有一个要过滤的div列表,其中包含2组复选框:
Type
和Category
。
When 2 categories are checked, it should show DIV's containing at least 1 of the categories. 选中2个类别后,它应显示包含至少1个类别的DIV。
When a type is checked, it should only shows DIV's from that type. 选中类型后,它应仅显示该类型的DIV。 Even if it contains a checked category.
即使它包含选中的类别。
<input type="checkbox" name="type[]" value="Type 1">
<input type="checkbox" name="type[]" value="Type 2">
<input type="checkbox" name="type[]" value="Type 3">
<input type="checkbox" name="category[]" value="1">
<input type="checkbox" name="category[]" value="2">
<input type="checkbox" name="category[]" value="3">
<input type="checkbox" name="category[]" value="4">
The DIV's: DIV的:
<div data-type="Type 1" data-cat="1 4">
<div data-type="Type 2" data-cat="1 2 3">
The code I have so far (only filters type): 我到目前为止的代码(仅过滤器类型):
$('form input:checkbox').change(function(){
var type = [];
var checked = $(':checkbox:checked').length;
// Hide all
$('#videoHolder').children('div').hide();
$(':checkbox:checked').each(function(i){
type[i] = $(this).val();
$('#videoHolder').children('div[data-type="' + type[i] + '"]').fadeIn();
});
// Show all
if(checked==0){
$('#videoHolder').children('div').fadeIn();
}
});
You would need to check each category attribute by hand. 您需要手动检查每个类别属性。 Or you might consider using the regEx plugin for jQuery.
或者,您可以考虑将regEx插件用于jQuery。
// select only category check box-es!!
$(':checkbox:checked').each(function(i, checkBox){
var search = $(checkBox).val();
$('#videoHolder').children('div').each(function(index, divTag) {
var category = $(divTag).attr("data-cat");
var dataType = $(divTag).attr("data-type");
if (isOfType(search, dataType) || containsCategory(search, category))
$(divTag).fadeIn();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.