javascript - Having issues in filtering with product list with data attributes

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

I created a code regarding my div filteration.In this code i am having data-brand and data-store as two attributes of div and i m having checkboxes related to these divs as ids brand and store respectively.When i m filtering with brand or store at one time.like if u selected one brand or one store checkbox(either of them),it filters correctly based on selection.lets say u selected one of the store checkbox.then we made second selection from store checkbox list.then we should be able to see both the selected stores list.i.e.Both JCPenny and Super mart divs should be shown,not the earlier selected.But when i m selecting for second time store checkbox list ,its hididng the first selected checkbox related divs and displaying the second or latest selected checkbox div s.Similar issue is for Brand checkbox. Please help on this......its very important for me...

Please help on this...

Answer 1

Here is the JS code you need to modify:

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

Demo : http://jsfiddle.net/qxxL2/4/