使用jquery进行Div过滤

您好，我想使用多个复选框创建一个div过滤器，这些复选框具有div have class的值。 我的js正在比较这些值和类，并显示相似的值。 我想合并这些复选框。例如，当选中“面筋通”和“面筋通”时，不应显示只有面筋通或只有面筋通的图元

这是密码笔

编辑：此处的解决方案>

谷蛋白
拉克图西顿
Vähälaktoosinen
迈多顿
索亚顿
麦多顿谷朊虫
拉克图西顿迈多顿酒店
谷蛋白
索亚顿
迈多顿索亚顿酒店
迈多顿
拉克图西顿
$（“.element”）.hide（）；
$（“#筛选输入”）。单击（函数（）{
var checked=$（“#过滤器输入”）.is（'：checked'）；
如果（选中）{
$（“#过滤器：复选框：选中”）。每个（函数（）{
$（“+$（this.val（））.show（）；
});
}
否则{
$（“.element”）.hide（）；
}    
});   

如果我没有弄错你的问题，下面应该是解决方案。请检查一下这段代码

$(".element").hide();
$("#filters input").click(function() { 
var checked = $(this).is(':checked');
if (checked) {


    $("#filters input[type='checkbox']:checked").each(function() {
        $("." + $(this).val()).show();
    });
}
else {

    $(".element."+$(this).val()).hide();
    $("#filters input[type='checkbox']:checked").each(function() {
        $("." + $(this).val()).show();
    });
}
}); 

---

如果我没有弄错你的问题，下面应该是解决办法。请检查一下这段代码

$(".element").hide();
$("#filters input").click(function() { 
var checked = $(this).is(':checked');
if (checked) {


    $("#filters input[type='checkbox']:checked").each(function() {
        $("." + $(this).val()).show();
    });
}
else {

    $(".element."+$(this).val()).hide();
    $("#filters input[type='checkbox']:checked").each(function() {
        $("." + $(this).val()).show();
    });
}
}); 

---

它似乎对我有用，只是你需要隐藏每次单击时显示的所有框，然后显示匹配的框。这应该行得通

$(".element").hide();
$("#filters input").click(function() { 
    $(".element").hide();
    var checked = $("#filters :checkbox:checked").map(function(){
        return $(this).val();
    }).get().join('.');
    $('.element.' + checked).show();
}); 

编辑：更改代码以符合严格匹配的要求。要选择具有多个类的元素，只需列出选择器中与句点链接的所有类。（例如$（'.class1.class2.class3））Map函数以数组形式返回其内部函数的所有结果（在本例中为值）。如果随后以句点作为分隔符加入数组，则可以使用所需的选择器

---

如果你想要一个非常酷的jquery过滤和排序插件，这样你就不必自己编写它了，看看Quicksand：

它对我来说似乎很有用，只是你需要隐藏每次单击时显示的所有框，然后显示匹配的框。这应该行得通

$(".element").hide();
$("#filters input").click(function() { 
    $(".element").hide();
    var checked = $("#filters :checkbox:checked").map(function(){
        return $(this).val();
    }).get().join('.');
    $('.element.' + checked).show();
}); 

编辑：更改代码以符合严格匹配的要求。要选择具有多个类的元素，只需列出选择器中与句点链接的所有类。（例如$（'.class1.class2.class3））Map函数以数组形式返回其内部函数的所有结果（在本例中为值）。如果随后以句点作为分隔符加入数组，则可以使用所需的选择器

---

如果你想要一个非常酷的jquery过滤和排序插件，这样你就不必自己编写它了，看看Quicksand：

我必须完全改变方法，改用数据属性 答案就在这里

---

我不得不完全改变方法，改用数据属性 答案就在这里

---

嗨，格雷格，是的，它正在工作，但只有当你使用一个复选框。当您使用两个或多个复选框时，我希望过滤器能够严格工作。元素应严格具有这两个或多个选定值。“流沙”用作单选按钮，我需要复选框。请查看我编辑的答案。这适用于严格过滤。流沙过滤器也适用于复选框。并进行严格的过滤。我在这一页上使用它。组中的多个选择将显示与任何选定项匹配的所有选项。但不同组中的选择只会显示所有组中匹配的组。它非常灵活。嗨，格雷格，是的，它正在工作，但只有当你使用一个复选框时。当您使用两个或多个复选框时，我希望过滤器能够严格工作。元素应严格具有这两个或多个选定值。“流沙”用作单选按钮，我需要复选框。请查看我编辑的答案。这适用于严格过滤。流沙过滤器也适用于复选框。并进行严格的过滤。我在这一页上使用它。组中的多个选择将显示与任何选定项匹配的所有选项。但不同组中的选择只会显示所有组中匹配的组。它非常灵活。