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

Question

我在网上搜索了一些关于使用 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();
    }
    }

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

请指导我解决上述问题，因为会有很多带空格的品牌和商店名称。帮我解决这个问题..

上面代码的 js fiddle 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();
    });