Question

您好我想使用多个复选框制作div过滤器，这些复选框具有div具有类的值。我的js正在比较those的值和类，并显示类似的。我想把这些复选框结合起来。例如，当检查glutenitoon和maidoton时，不应显示仅含maidoton或仅使用glutenitoon的元素。

这是codepen http://codepen.io/anon/pen/yYgpda

编辑：解决方案＆gt; http://codepen.io/anon/pen/KdaGwM

<div id="filters">
        <input type="checkbox" name="gluteeniton" value="gluteeniton" id="filter-gluteeniton">Gluteeniton
        <input type="checkbox" name="laktoositon" value="laktoositon" id="filter-laktoositon">Laktoositon
        <input type="checkbox" name="vahalaktoosinen" value="vahalaktoosinen" id="filter-vahalaktoosinen">Vähälaktoosinen
        <input type="checkbox" name="maidoton" value="maidoton" id="filter-maidoton">Maidoton
        <input type="checkbox" name="soijaton" value="soijaton" id="filter-soijaton">Soijaton
    </div>

    <div class="filtered-products">                    
        <div class="element gluteeniton laktoositon maidoton">gluteeniton laktoositon maidoton</div>
        <div class="element laktoositon maidoton">laktoositon maidoton</div>
        <div class="element gluteeniton">gluteeniton</div>
        <div class="element soijaton">Soijaton</div>
        <div class="element maidoton soijaton">Maidoton Soijaton</div>
        <div class="element maidoton">Maidoton</div>
        <div class="element laktoositon">Laktoositon</div>
    </div>   



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

            $("#filters :checkbox:checked").each(function() {
                $("." + $(this).val()).show();
            });
        }
        else {
        $(".element").hide();
        }    

  });

Answer 1

如果我的问题是对的，那么以下应该是解决方案。请检查一下这段代码

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

Answer 2

除了您需要隐藏每次点击时显示的所有方框然后显示匹配的方框外，它似乎对我有用。这应该工作。

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

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

如果您想要一个非常酷的jquery过滤和排序插件，那么您不必尝试自己编写它来看看Quicksand：http://razorjack.net/quicksand/

Answer 3

我必须完全改变方法并使用数据属性答案就在这里 http://codepen.io/anon/pen/zvNjGr

$('#filters').delegate('input[type=checkbox]', 'change', function() {
                    var $lis = $('.filtered-products > div'),
                        $checked = $('input:checked');
                    if ($checked.length)
                    {                           
                        var selector = '';
                        $($checked).each(function(index, element){                            
                            selector += "[data-category~='" + element.id + "']";                            
                        });                        
                        $lis.hide();                        
                        $('.filtered-products > div').filter(selector).show();             
                    }
                    else
                    {
                        $lis.show();
                    }
                });

使用jquery进行Div过滤

3 个答案: