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过滤的代码。在这段代码中我将数据品牌和数据存储作为div和im的两个属性，分别将这些div作为ids品牌和商店的复选框。当我用品牌过滤时或者一次存储。就像你选择一个品牌或一个商店复选框（其中任何一个），它根据selection.lets说你选择了一个商店复选框正确过滤。然后我们从商店复选框列表中进行第二次选择。然后我们应该能够看到两个选定的商店list.ieBoth JCPenny和Super mart divs应该显示，而不是之前选择的。但是当我选择第二次存储复选框列表时，它隐藏了第一个选中的复选框相关的div并显示第二个或最新选择的复选框div。类似问题适用于品牌复选框。请帮忙......这对我来说非常重要......

请帮忙...

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/

使用数据属性过滤产品列表时遇到问题

1 个答案: