Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.3k views
in Technique[技术] by (71.8m points)

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

<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...

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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/


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...