Javascript 尝试使用复选框筛选结果
所以我有这些基本上是结果的div,我尝试使用复选框和数据类别标记过滤所述结果 下面是我在下面使用的代码,它可以工作,除了它应该只显示div,如果它的数据类别标记匹配所有选中的复选框。但是在这个脚本中,如果您选择boditrak、trackman和indoor,它将显示包含其中任何一个的结果,而不仅仅是包含每个标记的结果Javascript 尝试使用复选框筛选结果,javascript,filter,jsfiddle,Javascript,Filter,Jsfiddle,所以我有这些基本上是结果的div,我尝试使用复选框和数据类别标记过滤所述结果 下面是我在下面使用的代码,它可以工作,除了它应该只显示div,如果它的数据类别标记匹配所有选中的复选框。但是在这个脚本中,如果您选择boditrak、trackman和indoor,它将显示包含其中任何一个的结果,而不仅仅是包含每个标记的结果 测验 跟踪器 博迪特拉克 kvest 慢动作 室内 高尔夫球手姓名-boditrak trackman slowmotion 高尔夫球手姓名-室内慢速运动跟踪员 高尔夫球手
测验
跟踪器
博迪特拉克
kvest
慢动作
室内
高尔夫球手姓名-boditrak trackman slowmotion
高尔夫球手姓名-室内慢速运动跟踪员
高尔夫球手姓名-kvest boditrak trackman
高尔夫球手姓名-室内慢动作
var byProperty=[];
$(“输入[name=sq过滤器]”)。在(“更改”,函数()上){
if(this.checked)byProperty.push(“[datacategory~=”+$(this.attr)(“value”)+”]);
else removeA(按属性,“[data category~='”+$(this.attr(“value”)+“]”);
});
$(“输入”)。关于(“更改”,函数(){
var str=“包括项目\n”;
变量选择器=“”,cselector=“”,nselector=“”;
变量$lis=$('.filters>div'),
$checked=$('input:checked');
如果($checked.length){
if(byProperty.length){
如果(str==“包括项目\n”){
str+=“+”带(“+byProperty.join”(“,”)+”)\n;
$($('input[name=sq filter]:选中'))。每个(函数(索引,byProperty){
如果(选择器==''){
选择器+=“[data category~=”+byProperty.id+“]”;
}否则{
选择器+=”,[data category~='“+byProperty.id+”];
}
});
}否则{
str+=”和“+”加上(“+byProperty.join”('OR')+”)\n;
$($('input[name=fl size]:checked'))。每个(函数(索引,按属性){
选择器+=“[data category~=”+byProperty.id+“]”;
});
}
}
$lis.hide();
控制台日志(选择器);
控制台日志(cselector);
控制台日志(nselector);
如果(cselector==''&&nselector==''){
$('.filters>div').filter(选择器).show();
}else if(cselector==''){
$('.filters>div').filter(选择器).filter(nslector.show();
}否则如果(nselector==''){
$('.filters>div').filter(选择器).filter(cselector.show();
}否则{
$('.filters>div').filter(选择器).filter(cselector).filter(nselector.show();
}
}否则{
$lis.show();
}
$(“#结果”).html(str);
});
功能移除(arr){
var what,a=参数,L=a.length,ax;
while(长度>1&&arr.length){
什么=a[--L];
while((ax=arr.indexOf(what))!=-1){
阵列拼接(ax,1);
}
}
返回arr;
}
问题在于选择器中的每个[data category~=]
变量之间添加的逗号
,。因此jQuery正在寻找具有以下任一数据类别的元素
。所以只要删除逗号,那么只有jQuery会开始查找那些包含所有这些数据类别的元素
您的选择器值应该是[data category~='trackman'][data category~='boditrak']
而不是[data category~='trackman'],[data category~='boditrak']
var-byProperty=[];
$(“输入[name=sq过滤器]”)。在(“更改”,函数()上){
if(this.checked)byProperty.push(“[datacategory~=”+$(this.attr)(“value”)+”]);
else removeA(按属性,“[data category~='”+$(this.attr(“value”)+“]”);
});
$(“输入”)。关于(“更改”,函数(){
var str=“包括项目\n”;
变量选择器=“”,cselector=“”,nselector=“”;
变量$lis=$('.filters>div'),
$checked=$('input:checked');
如果($checked.length){
if(byProperty.length){
如果(str==“包括项目\n”){
str+=“+”带(“+byProperty.join”(“,”)+”)\n;
$($('input[name=sq filter]:选中'))。每个(函数(索引,byProperty){
选择器+=“[data category~=”+byProperty.id+“]”;
});
}否则{
str+=”和“+”加上(“+byProperty.join”('OR')+”)\n;
$($('input[name=fl size]:checked'))。每个(函数(索引,按属性){
选择器+=“[data category~=”+byProperty.id+“]”;
});
}
}
$lis.hide();
控制台日志(选择器);
控制台日志(cselector);
控制台日志(nselector);
如果(cselector==''&&nselector==''){
$('.filters>div').filter(选择器).show();
<html>
<head>
<title>Test</title>
</head>
<body>
<input type='checkbox' name="sq-filter" value="trackman" id="trackman">trackman<br>
<input type='checkbox' name="sq-filter" value="boditrak" id="boditrak"> boditrak<br>
<input type="checkbox" name="sq-filter" value="kvest" id="kvest">kvest<br>
<input type="checkbox" name="sq-filter" value="slowmotion" id="slowmotion">slowmotion<br>
<input type="checkbox" name="sq-filter" value="indoor" id="indoor">indoor<br>
<p>
<div class="filters">
<div data-id="golfer" data-category="boditrak trackman slowmotion">
<p>Golfer Name - boditrak trackman slowmotion</p>
</div>
<div data-id="golfer" data-category="indoor slowmotion trackman">
<p>Golfer Name - indoor slowmotion trackman</p>
</div>
<div data-id="golfer" data-category="kvest boditrak trackman">
<p>Golfer Name - kvest boditrak trackman</p>
</div>
<div data-id="golfer" data-category="indoor slowmotion">
<p>Golfer Name - indoor slowmotion</p>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var byProperty = [];
$("input[name=sq-filter]").on( "change", function() {
if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
});
$("input").on( "change", function() {
var str = "Include items \n";
var selector = '', cselector = '', nselector = '';
var $lis = $('.filters > div'),
$checked = $('input:checked');
if ($checked.length) {
if (byProperty.length) {
if (str == "Include items \n") {
str += " " + "with (" + byProperty.join(',') + ")\n";
$($('input[name=sq-filter]:checked')).each(function(index, byProperty){
if(selector === '') {
selector += "[data-category~='" + byProperty.id + "']";
} else {
selector += ",[data-category~='" + byProperty.id + "']";
}
});
} else {
str += " AND " + "with (" + byProperty.join(' OR ') + ")\n";
$($('input[name=fl-size]:checked')).each(function(index, byProperty){
selector += "[data-category~='" + byProperty.id + "']";
});
}
}
$lis.hide();
console.log(selector);
console.log(cselector);
console.log(nselector);
if (cselector === '' && nselector === '') {
$('.filters > div').filter(selector).show();
} else if (cselector === '') {
$('.filters > div').filter(selector).filter(nselector).show();
} else if (nselector === '') {
$('.filters > div').filter(selector).filter(cselector).show();
} else {
$('.filters > div').filter(selector).filter(cselector).filter(nselector).show();
}
} else {
$lis.show();
}
$("#result").html(str);
});
function removeA(arr) {
var what, a = arguments, L = a.length, ax;
while (L > 1 && arr.length) {
what = a[--L];
while ((ax= arr.indexOf(what)) !== -1) {
arr.splice(ax, 1);
}
}
return arr;
}
</script>
</html>