div的数据属性之间存在空格时，产品过滤无法正确进行

Question

我在网上搜索了一些有关使用div进行数据过滤的产品代码。我有两个数据属性，现在一个属性是brand（品牌），第二个属性是store。我在根据brand and store复选框选择的基础上对记录进行过滤。与给定的代码如下

<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();
    }
    }

过滤正常工作，但是当我在复选框ID之间的字符串中或div的数据属性中引入空格时。 例如，当前在上面的代码中，任何复选框id或任何data属性中都没有空格。但是更进一步，我有一些名称之间存在空格（例如品牌名称-Advance baby），现在在这种情况下，该复选框id将成为高级宝贝，数据品牌属性也将成为高级宝贝。当我提供这些值并尝试过滤div时，过滤将不起作用。对于商店复选框id和数据存储属性也是如此。

关于以上问题，请为我提供指导，因为会有很多品牌和商铺名称，并且带有空格。 帮助我解决这个问题。

上面的代码的js小提琴http://jsfiddle.net/qxxL2/4/

Answer 1

您在情况中缺少逗号（。）。请尝试以下操作：它将起作用：

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

和

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