產品過濾不正確當div

Question

的數據屬性之間存在空格時我在網上搜索了一些關於使用div的數據屬性進行產品過濾的代碼。我現在有兩個數據屬性，一個是品牌，第二個是store.I m過濾品牌和存儲複選框的基礎上記錄selection.The濾波用給定的代碼正確地appening如下

<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數據attribues串引入空間。 例如，目前在aboave代碼中，任何複選框標識或任何數據屬性中都沒有空格。但是，進一步我有一些名稱與空格之間的空格（如品牌名稱 - Advance嬰兒） 現在在這種情況下，The複選框ID將成爲Advance嬰兒，數據品牌屬性也將成爲Advance嬰兒。當我給這些值並嘗試過濾div。過濾不起作用。類似地，用於存儲複選框ID和數據存儲屬性。

請指導我上面的問題，因爲會有很多品牌和商店的名稱與空間。 幫我出FR解決這個問題..

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