具有與數據產品列表過濾問題屬性

Question

<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">Andrew</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">Hill</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> 

//checkBox(); 
$('input[type="checkbox"]').change(function(){ 

    alert("check"); 
    var a=$("input.brand"); 
    var b=$("input.store"); 
    var brand=""; 
    var store=""; 



     if($(a).is(":checked")) { 
      alert("brand checked"); 
     $('#prod >div').hide(); 
      brand=$(this).attr('id'); 
      console.log(brand+","+store); 
     displaydivs(brand,store); 
     } 
    else{ 
     $('#prod >div').show(); 

     brand="" 
     displaydivs(brand,store); 
     } 

}); 


    function displaydivs(brand,store) 
    { 
    if(brand!="" & store!=""){ 
     alert(brand); 
     alert(store); 
     $("#prod >div").hide(); 
     $("#prod >div[data-store="+store+"][data-brand="+brand+"]").show(); 

     } 
     else if(brand!="" & store==""){ 
$("#prod >div").hide(); 
     $('#prod >div[data-brand="'+brand+'"]').show(); 
     } 
     else if(brand=="" & store!=""){ 
$("#prod >div").hide(); 
     $("#prod >div[data-store="+store+"]").show(); 
     } 
     } 

我創造了對我的DIV filteration.In這段代碼我有數據，品牌和數據存儲作爲DIV兩個屬性並具有複選框IM與它們相關的代碼當品牌或店鋪一次過濾時，如果你選擇了一個品牌或一個商店複選框（它們中的任何一個），它會根據選擇正確過濾。小孩說你選擇了一家商店checkbox.then我們從商店複選框列表中選擇第二個選擇。然後我們應該能夠看到所選商店list.ie JCPenny和超市mart divs應顯示，而不是更早選擇。但當IM選擇第二次存儲複選框列表，它隱藏了第一個選中的複選框相關的div，並顯示第二個或最新的sele cted複選框div s。類似的問題是品牌複選框。 請幫助這個......它對我很重要......

在此請幫助...

Answer 1

以下是你需要修改的JS代碼：

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

演示：http://jsfiddle.net/qxxL2/4/