Javascript 当div的数据属性之间存在空格时，产品筛选未正确发生

我在网上搜索了一些关于使用div的数据属性进行产品筛选的代码。我现在有两个数据属性，一个是品牌，另一个是商店。我正在根据品牌和商店复选框选择筛选记录。筛选显示正确，代码如下所示

<div id="prod">
<div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny">Andrew</div><br />
<div class="content" data-brand="Hill" data-price="1200" data-store="JCPenny">Hill</div><br />
<div class="content" data-brand="Andrew" data-price="2000" data-store="JCPenny">Andrew</div><br />
<div class="content" data-brand="Hill" data-price="800" data-store="SuperMart">Hill</div><br />
<div class="content" data-brand="Hill" data-price="1300" data-store="SuperMart">Hill</div><br />
<div class="content" data-brand="Andrew" data-price="800" data-store="JCPenny">Andrew</div><br />
    <input type="checkbox" class="brand" id="Andrew" />Andrew
    <input type="checkbox" class="brand" id="Hill" />Hill
    <input type="checkbox" class="store" id="JCPenny" />JCPenny
    <input type="checkbox" class="store" id="SuperMart" />SuperMart
</div>


var a=$("input.brand");
    var b=$("input.store");
    var brand=new Array();
    var store=new Array();
$('input[type="checkbox"]').change(function(){
    if($(this).is(":checked")){
       $('#prod >div').hide();
       if(this.className == "brand"){
           console.debug("brand checked");
           brand.push($(this).attr('id'));
        }else if(this.className == "store"){
           console.debug("store checked");
           store.push($(this).attr('id'));
        }
         console.log(brand+","+store);
         displaydivs(brand,store);
    }else{
     $('#prod >div').show();
     if(this.className == "brand"){
         var index = brand.indexOf($(this).attr('id'));
         if (index > -1) {
            brand.splice(index, 1);
         }       
     }else if(this.className == "store"){
         var index = store.indexOf($(this).attr('id'));
         if (index > -1) {
            store.splice(index, 1);
         } 
     }
     displaydivs(brand,store);
    }     
});


    function displaydivs(brand,store)
    {
        $("#prod >div").hide();
    if(brand.length > 0 & store.length > 0){ 
        $.each(brand, function( index, value ){
            var temp = $("#prod >div[data-brand="+value+"]")[0];
            var data = $(temp).attr("data-store");
            var idx = store.indexOf(data);
            if(idx > -1){
              $("#prod >div[data-brand="+value+"][data-store="+data+"]").show();
            }            
        });  
        $.each(store, function( index, value ){
            var temp = $("#prod >div[data-store="+value+"]")[0];
            var data = $(temp).attr("data-brand");
            var idx = brand.indexOf(data);
            if(idx > -1){
              $("#prod >div[data-brand="+data+"][data-store="+value+"]").show();
            }            
        });
    }
    else if(brand.length > 0 & !(store.length > 0)){ 
        $.each( brand, function( index, value ){
            $("#prod >div[data-brand="+value+"]").show();
        });
    }
    else if(!(brand.length > 0) & store.length > 0){ 
        $.each( store, function( index, value ){
            $("#prod >div[data-store="+value+"]").show();
        });
    }else{
        $("#prod >div").show();
    }
    }

安德鲁

希尔

安德鲁

希尔

希尔

安德鲁

安得烈
山丘
彭尼
超人
var a=$（“input.brand”）；
VarB=$（“input.store”）；
var brand=新数组（）；
var store=新数组（）；
$（'input[type=“checkbox”]”）。更改（函数（）{
如果（$（this）.is（“：checked”））{
$（'#prod>div'）.hide（）；
如果（this.className==“品牌”）{
控制台调试（“品牌检查”）；
brand.push（$（this.attr（'id'））；
}else if（this.className==“store”）{
console.debug（“存储已选中”）；
store.push（$（this.attr（'id'））；
}
console.log（品牌+，“+商店）；
展示区（品牌、商店）；
}否则{
$（'#prod>div'）.show（）；
如果（this.className==“品牌”）{
var index=brand.indexOf（$（this.attr（'id'））；
如果（索引>-1）{
品牌拼接（索引1）；
}       
}else if（this.className==“store”）{
var index=store.indexOf（$（this.attr（'id'））；
如果（索引>-1）{
存储拼接（索引，1）；
} 
}
展示区（品牌、商店）；
}     
});
功能显示分区（品牌、商店）
{
$（“#prod>div”）.hide（）；
如果（brand.length>0和store.length>0）{
美元。每个（品牌、功能（指数、价值）{
var temp=$（“#prod>div[data brand=“+value+”]）[0]；
变量数据=$（临时）.attr（“数据存储”）；
var idx=store.indexOf（数据）；
如果（idx>-1）{
$（“#prod>div[data brand=“+value+”][data store=“+data+”]）。show（）；
}            
});  
$。每个（存储、函数（索引、值）{
var temp=$（“#prod>div[data store=“+value+”]）[0]；
var数据=$（临时）.attr（“数据品牌”）；
var idx=品牌指数（数据）；
如果（idx>-1）{
$（“#prod>div[data brand=“+data+”][data store=“+value+”]）。show（）；
}            
});
}
如果（brand.length>0&！（store.length>0））{
美元。每个（品牌、功能（指数、价值）{
$（“#prod>div[data brand=“+value+”]）。show（）；
});
}
如果（！（brand.length>0）和store.length>0）{
$。每个（存储、函数（索引、值）{
$（“#prod>div[data store=“+value+”]）。show（）；
});
}否则{
$（“#prod>div”）.show（）；
}
}

过滤工作正常，但当我在复选框id之间的字符串或div的数据属性中引入空格时。 例如，当前在aboave代码中，任何复选框id或任何数据属性中都没有空格。但更进一步，我有一些名称中间有空格（如品牌名称Advance baby） 现在在这种情况下，复选框id将变为Advance baby，数据品牌属性也将变为Advance baby。当我给出这些值并尝试过滤div时，过滤不起作用。存储复选框id和数据存储属性也是如此

请指导我以上的问题，因为将有很多品牌和商店名称与空间。 帮我解决这个问题

---

上述代码的js FIDLE

您的条件中缺少倒逗号（“）。请尝试以下操作： 它将在以下方面发挥作用：

$.each( brand, function( index, value ){
        $("#prod >div[data-brand='"+value+"']").show();
    });

及

$.each( store, function( index, value ){
        $("#prod >div[data-store='"+value+"']").show();
    });