使用jquery进行div过滤

Question

您好，我想使用多个复选框制作一个 div 过滤器，这些复选框具有 div 类的值。 我的 js 正在比较这些值和类并显示相似的值。 我想组合这些复选框。例如，当勾选 glutenitoon 和 maidoton 时，不应显示只有 maidoton 或只有 glutenitoon 的元素。

这里是代码笔 http://codepen.io/anon/pen/yYgpda

编辑：解决方案在这里 > 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

我不得不完全改变方法并改用 data- 属性 答案就在这里 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();
                    }
                });

Answer 3

这似乎对我有用，只是您需要隐藏每次点击时显示的所有框，然后显示匹配的框。这应该有效。

$(".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：http://razorjack.net/quicksand/