Question

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

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

我使用更改功能通过data-使用checkbox属性过滤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>

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

以下是JSFIDDLE

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

Answer 1

以下代码适用于多品牌以及多种颜色，这是通过为品牌和颜色设置单独的滤镜阵列来完成的，如果选中过滤器，我们将添加到相应的滤镜阵列，最后我们检查每个http.authorizeRequests() .antMatchers("/admin/**").access("hasRole('ROLE_ADMIN')") .antMatchers("/dba/**").access("hasRole('ROLE_ADMIN') or hasRole('ROLE_DBA')") .and().httpBasic();并检查它是否同时包含品牌和颜色关键字，如果两者都符合，我们会显示^（*），否则我们隐藏^（*） it：< / p>

JS Fiddle

＆＃13;

div

＆＃13;

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

＆＃13;

编辑1：

如果你想要取消选中所有复选框的默认状态，我们创建一个包含所有逻辑的函数<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>，我们在页面首次加载时调用它，并且每次复选框都指出一个状态已更改，如此JS Fiddle 2所示。

编辑2：

javascript代码仍然具有冗余代码，这仅适用于3个复选框，假设有10个品牌，每个品牌有5种颜色，那么代码看起来会很混乱，并且会有更多机会发现错误，使代码更多我们为每个复选框添加了checkFilters()和data-type属性，并且具有强大，灵活且更短的属性，并且根据data-keyword属性的值，我们返回相应的数组并推送值将data-type属性放入相应的数组中，无论有多少颜色或品牌复选框都可以使用，就像在此JS Fiddle 3

一样

输入示例：

data-keyword

JS：

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

^*请注意，jQuery .show()＆＃34; 大致相当于调用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); } }); // ... } ＆＃34;虽然.hide()＆＃34; 大致相当于调用.css( "display", "block") ＆＃34;

Answer 2

一个非常晚的添加，但在背景中暂时忘记了小提琴。在遗忘小提琴行动组的一封信后，我决定将其发布。

由于目标似乎是隐藏与未选中框相关的数据，而不是显示检查任何数据属性的任何数据，因此您可以创建一个应隐藏数据元素的黑名单。除了在其他答案中提到的，我的偏好是将所有元数据放在（数据）-tags中，例如<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();
});

Fiddle

Answer 3

您可以使用jQuery为已检查项添加data-selected属性。我假设默认情况下没有选择项目。通过在所选div上使用attr属性，您可以添加此类属性。要确保在单击Nike复选框时仅显示已筛选的选择器，您需要将数据属性添加到该检查事件的选择器，并将其转换为$("div[data-brand=Nike][data-select=true]")。此外，为简洁起见，您可以将attr属性和css属性链接在一起。

https://jsfiddle.net/tfr9zh0w/

var BlueSelector = $('#BlueCB');

BlueSelector.on("change", function(){
if($(this).is(":checked"))
{
var divs = $("div[data-colour=Blue]");  
divs.attr('data-select', true).css("display",  "block");
} else 
{
var divs = $("div[data-colour=Blue]");  
divs.removeAttr('data-select').css("display",  "none");
}
});

var RedSelector = $('#RedCB');

RedSelector.on("change", function(){
if($(this).is(":checked"))
{
var divs = $("div[data-colour=Red]");  
divs.attr('data-select', true).css("display",  "block");
} else 
{
var divs = $("div[data-colour=Red]");  
divs.removeAttr('data-select').css("display",  "none");
}
});

var NikeSelector = $('#NikeCB');

NikeSelector.on("change", function(){
if($(this).is(":checked"))
{
var divs = $("div[data-brand=Nike][data-select=true]");  
divs.css("display",  "block");
} else 
{
var divs = $("div[data-brand=Nike]");  
divs.css("display",  "none");
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>

Answer 4

添加到颜色选择器的if语句中以确定是否选中了Nike框。

如果没有检查耐克盒，我个人会取消选中并禁用颜色复选框。

https://jsfiddle.net/z9qbecLx/4/

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

如果已在Jquery

4 个答案: