如果Jquery中已筛选，则保持筛选状态
Stay filtered if already filtered in Jquery
如果有人能想出更好的标题，请毫不犹豫地更改。
我是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>
要复制问题，请取消选中nike复选框，然后取消选中蓝色复选框并再次勾选。元素将弹出，这就是问题所在。
这是JSFIDDLE
这听起来可能不是最好的解释，但我已经尽我所能了。。你拨弄小提琴后就会明白了。
下面的代码将适用于多品牌和多种颜色，这是通过为品牌和颜色创建一个单独的过滤器阵列来完成的，如果检查了过滤器，我们将其添加到相应的过滤器阵列中，然后最后我们检查每个div，并检查它是否同时具有品牌和颜色关键字，如果两者都满足，我们将显示（*），否则我们隐藏（*）它：
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()"<em]大致等同于呼叫.css( "display", "none")>"
这是一个非常晚的添加，但在后台打开了一个暂时被遗忘的小提琴。在收到被遗忘的Fiddle行动小组的一封信后，我决定把它贴出来。
由于目标似乎是隐藏与未选中框相关的数据，而不是显示选中任何数据属性的任何数据，因此可以创建一个应隐藏其数据元素的黑名单。正如在其他答案中提到的那样，我更喜欢将所有元数据放在（数据）标签中，如<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
添加到颜色选择器的if语句中，以确定是否选中Nike框。
如果未选中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为选中的项目添加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>相关文章：
- 事件和状态
- 获取选择框的状态
- 相位器状态未捕获参考错误
- 如何更改reactjs中外部/独立组件的状态或属性
- 使用AngularJS中的筛选器更新给定的表
- 如何使用密码检测网络中的状态连接
- Ember.js-接口状态应该存储在哪里
- 淘汰搜索/筛选
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 在Angular 2中布线期间保持零部件处于活动状态
- 在mvc应用程序中，在回发时保留最初隐藏的文本框的隐藏或可见状态
- 使用单个列筛选进行状态保存
- 如何创建具有空白选项和未筛选状态的动态选择字段
- 在 Dojo 增强网格筛选器栏上设置状态文本
- 单个列筛选不保存下拉列表 jQuery 的状态
- 上一页全部(） 并按子状态进行筛选
- 通过orderBy和/或筛选器修改ng repeat时重置状态
- 如果Jquery中已筛选，则保持筛选状态
- 尝试保留筛选器状态时键入错误-Kendo UI网格
- 如何跨页面加载保存网格筛选器状态
