如果已在Jquery中过滤,请保持过滤

Question

如果有人能想到更好的标题,请不要犹豫,改变它.

我是jQuery的新手,并遇到了过滤元素的问题.

我正在使用更改功能data-通过属性过滤DIVS checkbox.

我的问题是,如果我过滤一个data属性(colour)然后我过滤另一个属性(brand),那么元素都是隐藏的.但是,如果我取消其中一个过滤器,即使它们仍然被另一个属性过滤,元素也会弹回.

无论如何我可以阻止这种情况发生吗？

这是代码.

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

要复制问题,请取消选中nike复选框,然后取消选中蓝色复选框并再次勾选.元素将弹出,这是问题.

这是JSFIDDLE

这可能听起来不是最好的解释,但我尽我所能......你会在玩小提琴后理解.

Answer 1

这是一个很晚的添加，但在后台打开了一个暂时被遗忘的小提琴。在收到“被遗忘的小提琴”行动小组的一封信后，我最终决定将其发布。

由于目标似乎是隐藏与未选中框相关的数据，而不是显示检查了任何数据属性的任何数据，因此您可以创建一个应隐藏数据元素的黑名单。正如在其他答案中提到的那样，我的偏好是将所有元数据放入（数据）标签中，例如<input type="checkbox" data-type="colour" data-value="Blue" checked>，但不是保留单独的过滤器，而是创建应隐藏的元素的组合过滤器。由于 jquery 可以轻松选择元素属性，因此可以使用 jquery 功能来为您进行过滤。

这个想法是，通过确定这样的过滤器，可以添加任何新的数据属性（例如大小，我也冒昧地在小提琴中添加了它）。

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

小提琴