具有与数据产品列表过滤问题属性

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/