Javascript 使用具有数据属性的产品列表进行筛选时出现问题

我创建了一个关于我的div筛选的代码。在这段代码中，我将data brand和data store作为div的两个属性，并将与这些div相关的复选框分别作为ids brand和store。当我一次使用brand或store进行筛选时。例如，如果您选择了一个品牌或一个store复选框，则选择其中的一个，它根据选择正确过滤。假设您选择了一个商店复选框。然后，我们从商店复选框列表中进行了第二次选择。然后，我们应该能够看到两个选择的商店列表。即，JCPenny和Super mart div都应显示，而不是先前选择的。但是，当我选择第二次商店复选框列表时，它隐藏第一个选中的复选框相关div，并显示第二个或最新选中的复选框div。品牌复选框也存在类似问题。 请帮帮忙这对我来说很重要

---

请对此提供帮助…

以下是您需要修改的JS代码：

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

---

演示：

您的代码乱七八糟。您的问题是有时调用displaydivs两次，每个选中的输入字段调用一次。我已经删除了存储区的第二个if块。现在只有一次调用displaydivs函数。现在，如果我从列表中选择两个品牌复选框，它只显示第二个的结果…现在要更改什么？这是同一个问题，妈妈。一旦你点击andrew复选框，然后点击hill并选中这两个复选框，它只显示hill相关的复选框…而不是andrewones@Dipali-妈妈，你能帮我解决我提到的问题吗？我已经尽力解决了。这是唯一剩下的事情了，为了休息，我想对你说你所有的努力thanks@Dipali-谢谢你这么好的解决方案，你能做一点小小的改变吗？比如如果你从列表中选择一个品牌复选框Andrew或Hill。然后你会看到相关的div。假设你选择了Andrew，之后你会选择两个商店中的一个。假设你选择了JCPenny，然后它应该匹配两者，即Andrew和JCPenny，并且应该给出Andrew和JCPenny所在的div。就像在这段代码中，如果你先选择JCPenny，然后是四个div，然后选择hill，那么应该给出一个div，因为hill和JCPenny只在一个div中。非常感谢妈妈

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