Javascript 如果已经在Jquery中过滤，则保持过滤状态

如果有人能想出一个更好的标题，请不要犹豫，改变它

我对jQuery很陌生，遇到了过滤元素的问题

我使用change函数通过

复选框使用
数据-
属性过滤div

我的问题是，如果我过滤一个
数据
属性（
颜色
），然后过滤另一个属性（
品牌
），元素都会隐藏。但是，如果我取消选中其中一个过滤器，元素会弹出，即使它们仍然被另一个属性过滤

我能阻止这一切发生吗

这是代码

<div data-brand="Nike" data-price="31" data-colour="Blue">Blue</div>
<div data-brand="Nike" data-price="31" data-colour="Red"> Red </div>
Colours:
Blue<input type="checkbox" id="BlueCB" checked>
Red<input type="checkbox" id="RedCB" checked>

Brand: Nike <input type="checkbox" id="NikeCB" checked>

<script>
    var BlueSelector = $('#BlueCB');

    BlueSelector.on("change", function(){
        if($(this).is(":checked"))
        {
            var divs = $("div[data-colour=Blue]");  
            divs.css("display",  "block");
        } else 
        {
            var divs = $("div[data-colour=Blue]");  
            divs.css("display",  "none");
        }
    });

    var RedSelector = $('#RedCB');

    RedSelector.on("change", function(){
        if($(this).is(":checked"))
        {
            var divs = $("div[data-colour=Red]");  
            divs.css("display",  "block");
        } else 
        {
            var divs = $("div[data-colour=Red]");  
            divs.css("display",  "none");
        }
    });

    var NikeSelector = $('#NikeCB');

    NikeSelector.on("change", function(){
        if($(this).is(":checked"))
        {
            var divs = $("div[data-colour=Nike]");  
            divs.css("display",  "block");
        } else 
        {
            var divs = $("div[data-brand=Nike]");  
            divs.css("display",  "none");
        }
    });
</script>

蓝色
红色
颜色：
蓝色
红色
品牌：耐克
var BlueSelector=$（“#BlueCB”）；
BlueSelector.on（“更改”，函数（）{
如果（$（this）.is（“：checked”））
{
var divs=$（“div[数据颜色=蓝色]”）；
css（“显示”、“块”）；
}否则
{
var divs=$（“div[数据颜色=蓝色]”）；
css分类（“显示”、“无”）；
}
});
var RedSelector=$（“#RedCB”）；
打开（“更改”，函数（）{
如果（$（this）.is（“：checked”））
{
var divs=$（“div[数据颜色=红色]”）；
css（“显示”、“块”）；
}否则
{
var divs=$（“div[数据颜色=红色]”）；
css分类（“显示”、“无”）；
}
});
var NikeSelector=$（“#NikeCB”）；
NikeSelector.on（“更改”，函数（）{
如果（$（this）.is（“：checked”））
{
var divs=$（“div[data color=Nike]”）；
css（“显示”、“块”）；
}否则
{
var divs=$（“div[data brand=Nike]”）；
css分类（“显示”、“无”）；
}
});

若要复制问题，请取消选中nike复选框，然后取消选中蓝色复选框并再次勾选。元素将弹出，这就是问题所在

这是你的电话号码

这听起来可能不是最好的解释，但我已经尽可能地给出了最好的解释。。玩完小提琴后，您就会明白。
您可以使用jQuery向选中的项目添加
数据选择属性。我假设默认情况下没有选择这些项目。通过对所选div使用
attr
属性，可以添加这样的属性。要确保在单击Nike复选框时仅显示筛选的选择器，您需要为该检查事件的选择器添加数据属性，将其转换为
$（“div[data brand=Nike][data select=true]”
）。此外，为了简洁起见，您可以将
attr
属性和
css
属性链接在一起



var BlueSelector=$（'#BlueCB'）；
BlueSelector.on（“更改”，函数（）{
如果（$（this）.is（“：checked”））
{
var divs=$（“div[数据颜色=蓝色]”）；
divs.attr（'data-select'，true）.css（“显示”、“块”）；
}否则
{
var divs=$（“div[数据颜色=蓝色]”）；
divs.removeAttr（'data-select'）.css（“显示”、“无”）；
}
});
var RedSelector=$（“#RedCB”）；
打开（“更改”，函数（）{
如果（$（this）.is（“：checked”））
{
var divs=$（“div[数据颜色=红色]”）；
divs.attr（'data-select'，true）.css（“显示”、“块”）；
}否则
{
var divs=$（“div[数据颜色=红色]”）；
divs.removeAttr（'data-select'）.css（“显示”、“无”）；
}
});
var NikeSelector=$（“#NikeCB”）；
NikeSelector.on（“更改”，函数（）{
如果（$（this）.is（“：checked”））
{
var divs=$（“div[data brand=Nike][data select=true]”）；
css（“显示”、“块”）；
}否则
{
var divs=$（“div[data brand=Nike]”）；
css分类（“显示”、“无”）；
}
});

蓝色
红色
颜色：
蓝色
红色
品牌：Nike
以下代码适用于多品牌和多种颜色，这是通过为品牌和颜色设置单独的过滤器阵列来实现的，如果过滤器被选中，我们将添加到相应的过滤器阵列中，然后最后我们检查每个
div
，并检查它是否同时包含品牌和颜色关键字，如果两者相遇，则显示（*）它，否则隐藏（*）它：



var Divs=$（'.Divs'），
复选框=$（'.chbx'），
BlueSelector=$（“#BlueCB”），
RedSelector=$（“#RedCB”），
NikeSelector=$（“#NikeCB”），
指数、颜色、品牌；
复选框。打开（“更改”，函数（）{
//重置过滤器阵列
var colorsfilters=[]，
BrandsFilters=[]；
//如果选中蓝色复选框，则将其添加到颜色数组中-
//否则它将被取消选中，请将其从颜色数组中删除
如果（BlueSelector.is（“：checked”））{
颜色过滤器。按（“蓝色”）；
}else if（BlueSelector.is（“：checked”）==false）{
索引=颜色过滤器。indexOf（'Blue'）；
彩色滤光片.拼接（索引“蓝色”）；
}
//如果选中红色复选框，则将其添加到颜色数组中-
//否则它将被取消选中，请将其从颜色数组中删除
if（RedSelector.is（“：checked”））{
颜色过滤器。按下（“红色”）；
}else if（RedSelector.is（“：checked”）==false）{
索引=颜色过滤器。indexOf（'Red'）；
彩色滤光片.拼接（索引“红色”）；
}
//如果选中Nike复选框，则将其添加到品牌阵列中-
//否则它将被取消选中，请将其从brands数组中删除
如果（NikeSelector.is（“：选中”））{
BrandsFilters.push（'Nike'）；
}否则如果（NikeSelector.is（“：checked”）==false）{
Index=BrandsFilters.indexOf（'Red'）；
BrandsFilters.拼接（索引为“蓝色”）；
}
//现在我们检查每种颜色和每种品牌-
//如果两个条件都满足，则显示div，否则将其隐藏。
Divs.each（函数（）{
color=$（this.attr（'data-color'）；
Brand=$（this.attr（'data-Brand'）；
如果（$.inArray（颜色、颜色过滤器）>-1）{
如果（$.inArray（品牌，品牌过滤器）>-1）{
$（this.show（）；
}否则{
$（this.hide（）；
}
}否则{
$（this.hide（）；
}
})
});

蓝色
红色
颜色：蓝色
红色

品牌：耐克
添加颜色选择器的if语句，以确定是否选中Nike box

我
var BlueSelector = $('#BlueCB');
var RedSelector = $('#RedCB');
var NikeSelector = $('#NikeCB');

BlueSelector.on("change", function(){
    if($(this).is(":checked") && NikeSelector.is(":checked"))
    {
        var divs = $("div[data-colour=Blue]");  
        divs.css("display",  "block");
    }
    else 
    {
        var divs = $("div[data-colour=Blue]");  
        divs.css("display",  "none");
    }
});

RedSelector.on("change", function(){
    if($(this).is(":checked") && NikeSelector.is(":checked"))
    {
        var divs = $("div[data-colour=Red]");  
        divs.css("display",  "block");
    }
    else 
    {
        var divs = $("div[data-colour=Red]");  
        divs.css("display",  "none");
    }
});

NikeSelector.on("change", function(){
  if($(this).is(":checked"))
  {
    RedSelector.prop('disabled', false);
    BlueSelector.prop('disabled', false);
    var divs = $("div[data-colour=Nike]");  
    divs.css("display",  "block");
  }
  else 
  {
    RedSelector.prop('checked', false).prop('disabled', true);
    BlueSelector.prop('checked', false).prop('disabled', true);
    var divs = $("div[data-brand=Nike]");  
    divs.css("display",  "none");
  }
});

var $boxes = $('input[data-type]'), //all input boxes with data-type attribute
    $dataObjects =$(); //will be filled with all bound data elements
$boxes.each(function(ind, inp){     //create filter information
    var type = inp.dataset.type, value = inp.dataset.value; //for older browsers, use  $(inp).data('type')  
  var filter =  'div[data-' + type +'="' + value +'"]';     
  inp.dataset.filter = filter;
    $.merge($dataObjects,$(filter));
}); 

$boxes.change(function(){
    var blacklist = $boxes.filter(function(i,b){return !b.checked})
    .map(function(i,b){return b.dataset.filter}).toArray().join();
  $dataObjects.hide().not(blacklist).show();
});