如果有人能为此想到更好的标题，请不要犹豫更改它。

我是 jQuery 的新手，遇到过过滤元素的问题。

我通过 checkbox 使用更改功能过滤具有 data- 属性的 DIVS。

我的问题是，如果我过滤一个 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>

要重现问题，请取消勾选耐克复选框，然后取消勾选蓝色复选框并再次勾选。该元素将弹回，这就是问题所在。

这是 JSFIDDLE

这可能听起来不是最好的解释，但我已尽我所能..你会在玩 fiddle 后明白。

最佳答案

下面的代码将适用于多品牌和多颜色，这是通过为品牌和颜色设置一个单独的过滤器数组来完成的，如果过滤器被选中，我们将添加到相应的过滤器数组，然后最后我们检查每个div 并检查它是否同时具有 brand 和 color 关键字，如果都满足我们显示^{( * )} 它，否则我们隐藏^{( * )}它:

JS Fiddle

var Divs = $('.divs'),
  CheckBoxes = $('.chbx'),
  BlueSelector = $('#BlueCB'),
  RedSelector = $('#RedCB'),
  NikeSelector = $('#NikeCB'),
  Index, Colour, Brand;


CheckBoxes.on("change", function() {
  // Reset filters Arrays
  var ColoursFilters = [],
    BrandsFilters = [];

  // If Blue checkbox is checked, add it to colours array -
  // Otherwise it's unchecked, remove it from the colours array
  if (BlueSelector.is(":checked")) {
    ColoursFilters.push('Blue');
  } else if (BlueSelector.is(":checked") == false) {
    Index = ColoursFilters.indexOf('Blue');
    ColoursFilters.splice(Index, 'Blue');
  }

  // If Red checkbox is checked, add it to colours array -
  // Otherwise it's unchecked, remove it from the colours array
  if (RedSelector.is(":checked")) {
    ColoursFilters.push('Red');
  } else if (RedSelector.is(":checked") == false) {
    Index = ColoursFilters.indexOf('Red');
    ColoursFilters.splice(Index, 'Red');
  }

  // If Nike checkbox is checked, add it to brands array -
  // Otherwise it's unchecked, remove it from the brands array
  if (NikeSelector.is(":checked")) {
    BrandsFilters.push('Nike');
  } else if (NikeSelector.is(":checked") == false) {
    Index = BrandsFilters.indexOf('Red');
    BrandsFilters.splice(Index, 'Blue');
  }

  // Now we check for every colour and every brand -
  // If both conditions met, show the div, else hide it.
  Divs.each(function() {
    Colour = $(this).attr('data-colour');
    Brand = $(this).attr('data-brand');
    if ($.inArray(Colour, ColoursFilters) > -1) {
      if ($.inArray(Brand, BrandsFilters) > -1) {
        $(this).show();
      } else {
        $(this).hide();
      }
    } else {
      $(this).hide();
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="divs" data-brand="Nike" data-price="31" data-colour="Blue">
  Blue</div>
<div class="divs" data-brand="Nike" data-price="31" data-colour="Red">
  Red</div>
Colours: Blue
<input class="chbx" type="checkbox" id="BlueCB" checked>Red
<input class="chbx" type="checkbox" id="RedCB" checked>
<br>Brand: Nike
<input class="chbx" type="checkbox" id="NikeCB" checked>

编辑 1:

如果您想将所有复选框的默认状态设置为未选中，我们创建一个包含所有逻辑的函数checkFilters()，我们在页面首次加载以及每次加载时调用它其中一个复选框的状态已更改，如此 JS Fiddle 2 所示.

编辑 2:

javascript 代码仍然有冗余代码，这仅适用于 3 个复选框，假设有 10 个品牌，每个品牌有 5 种颜色，那么代码看起来会很乱，并且重复出现错误的机会更多，使代码更健壮、灵活且更短，我们为每个复选框添加了 data-type 和 data-keyword 属性，并根据 data-type 的值 属性，我们返回相应的数组并将 data-keyword 属性的值推送到相应的数组中，这样无论有多少种颜色或品牌复选框，它都会起作用，就像这样JS Fiddle 3

输入示例:

<input class="chbx" type="checkbox" id="BlueCB" data-type="Colours" data-keyword="Blue" checked> Red

JS:

function checkFilters() {
    // Reset filters Arrays
    var ColoursFilters = [],
    BrandsFilters = [];

   CheckBoxes.each(function() {
       var $th = $(this), ArrayType, keyword;

       // Using ternary operator, we return the array that corresponds to the data-type
       ArrayType = $th.attr('data-type') == 'Colours' ? ColoursFilters : BrandsFilters;
       keyword = $th.attr('data-keyword');
       if ($th.is(':checked')) {
           ArrayType.push(keyword);
       } else if ($th.is(":checked") == false) {
           Index = ArrayType.indexOf(keyword);
           ArrayType.splice(Index, keyword);
       }
   });
   // ...  
}

^* 注意 jQuery .show() "大致相当于调用 .css( "display", "block")"而 .hide() “大致相当于调用 .css( "display", "none")”

关于javascript - 如果已在 Jquery 中过滤，则保持过滤，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34299387/