Question

我正在尝试使用复选框和jQuery制作可过滤的产品列表。我有一些代码可以工作（感谢我之前在这里找到的答案）。

我想使用CSS类来显示或隐藏项目。

我正在尝试按颜色，完成和价格过滤项目，问题是我的代码当前正在使用不同过滤器组之间的OR选择项目。

我需要能够在每个组中使用OR进行过滤（例如颜色），但是当复选框位于不同的组中时使用AND。我想这样做的方法是添加'。'在类名之间，如果颜色AND完成和价格css类匹配，则该项仅匹配过滤器。

示例#div.dark.smooth.b

我在Firebug控制台中尝试了这个，我可以用这种方式过滤我需要的项目，但不幸的是我不知道如何在jQuery中实现这一点。我的代码如下......

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<ul id="colour">
<li><input type="checkbox" name="colour" value="dark"> Dark</li>
<li><input type="checkbox" name="colour" value="medium"> Medium</li>
<li><input type="checkbox" name="colour" value="light"> Light</li>
</ul>

<ul id="finish">
<li><input type="checkbox" name="finish" value="smooth"> Smooth</li>
<li><input type="checkbox" name="finish" value="riven"> Riven</li>
<li><input type="checkbox" name="finish" value="honed"> Honed</li>
</ul>

<ul id="price">
<li><input type="checkbox" name="price" value="a"> Up to £25</li>
<li><input type="checkbox" name="price" value="b"> £25 to £45</li>
<li><input type="checkbox" name="price" value="c"> £45 to £65</li>
<li><input type="checkbox" name="price" value="d"> £65 to £85</li>
<li><input type="checkbox" name="price" value="e"> over £85</li>
</ul>

<div class="dark smooth b">dark smooth b</div>
<div class="medium honed d">medium honed d</div>
<div class="dark smooth d">dark smooth d</div>
<div class="light smooth b">light smooth b</div>
<div class="light riven b">light riven b</div>
<div class="dark riven c">dark riven c</div>
<div class="medium riven a">medium riven a</div>

<script>

$("#colour :checkbox,#finish :checkbox,#price :checkbox").click(function() {

       $("div").hide();

       $("#colour :checkbox:checked").each(function() {
           $("." + $(this).val()).slideDown('slow');
       });
       $("#finish :checkbox:checked").each(function() {
           $("." + $(this).val()).slideDown('slow');
       });
       $("#price :checkbox:checked").each(function() {
           $("." + $(this).val()).slideDown('slow');
       });

    });

</script>
</body>
</html>

Answer 1

用嵌套循环替换各个循环。

编辑：您还必须检查每个条件：

   var fc=false;
   var ff=false;
   var fp=false;
   $("#colour :checkbox:checked").each(function() {
        fc=true;
        var color = $(this).val();
        $("#finish :checkbox:checked").each(function() {
            ff=true;
            var finish = $(this).val();
            $("#price :checkbox:checked").each(function() {
                 fp=true;
                 $("." + color + "." + finish + "." + $(this).val()).slideDown('slow');
            });
            if(!fp) {
                 $("." + color + "." + finish).slideDown('slow');
            }
        });
        if(!ff) {
            $("#price :checkbox:checked").each(function() {
                 fp=true;
                 $("." + color + "." + $(this).val()).slideDown('slow');
            });
            if(!fp) {
                 $("." + color).slideDown('slow');
            }
        }
   });
   if(!fc) {
       $("#finish :checkbox:checked").each(function() {
           ff = true;
           var finish = $(this).val();
           $("#price :checkbox:checked").each(function() {
               fp=true;
               $("." + finish + "." + $(this).val()).slideDown('slow');
           });
           if(!fp) {
                 $("." + finish).slideDown('slow');
           }
       });
       if(!ff) {
           $("#price :checkbox:checked").each(function() {
                $("." + $(this).val()).slideDown('slow');
           });
       }
   }

Answer 2

好的 - 我误解了CSS类，尝试将其粘贴到Checkbox点击功能的下方，它会给你一个如何做到这一点的指针..

     var ColorArray = [];
        var FinishArray = [];
        var PriceArray = [];

        ColorArray[0] = "Dark";
        ColorArray[1] = "Medium";

        FinishArray[0] = "Smooth";
        FinishArray[1] = "Riven";

        PriceArray[0] = "a";
        PriceArray[1] = "b";
        PriceArray[2] = "c";



        for (c = 0; c < ColorArray.length ; c++) {
            for (f = 0; f < FinishArray.length ; f++) {
                for (p = 0; p < PriceArray.length ; p++) {
                                alert(ColorArray[c] +"."+ FinishArray[f] + "."+PriceArray[p]);
                }
            }
        }

        })

EDIT - the full working solution based on the above method [with 4 select options now] is pasted below.


    <!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <ul id="filter1">
        <li>
            <input type="checkbox" name="filter1" value="dark">
            Dark</li>
        <li>
            <input type="checkbox" name="filter1" value="medium">
            Medium</li>
        <li>
            <input type="checkbox" name="filter1" value="light">
            Light</li>
    </ul>

    <ul id="filter2">
        <li>
            <input type="checkbox" name="filter2" value="sm">
            Small</li>
        <li>
            <input type="checkbox" name="filter2" value="med">
            Medium</li>
        <li>
            <input type="checkbox" name="filter2" value="lge">
            Large</li>
    </ul>

    <ul id="filter3">
        <li>
            <input type="checkbox" name="filter3" value="smooth">
            Smooth</li>
        <li>
            <input type="checkbox" name="filter3" value="riven">
            Riven</li>
        <li>
            <input type="checkbox" name="filter3" value="honed">
            Honed</li>
    </ul>

    <ul id="filter4">
        <li>
            <input type="checkbox" name="filter4" value="a">
            Up to £25</li>
        <li>
            <input type="checkbox" name="filter4" value="b">
            £25 to £45</li>
        <li>
            <input type="checkbox" name="filter4" value="c">
            £45 to £65</li>
        <li>
            <input type="checkbox" name="filter4" value="d">
            £65 to £85</li>
        <li>
            <input type="checkbox" name="filter4" value="e">
            over £85</li>
    </ul>

    <p><a class="showall" href="#" />Clear Filters</a></p>

    <div class="list dark sm smooth b">dark small smooth b</div>
    <div class="list medium lge honed d">medium large honed d</div>
    <div class="list dark med smooth d">dark medium smooth d</div>
    <div class="list light sm smooth b">light small smooth b</div>
    <div class="list light lge riven b">light large riven b</div>
    <div class="list dark sm riven c">dark small riven c</div>
    <div class="list medium med riven a">medium medium riven a</div>
    <div class="list medium lge honed e">medium large honed e</div>

    <div class="NoResults"></div>

    <script>

        $("#filter1 :checkbox,#filter2 :checkbox,#filter3 :checkbox,#filter4 :checkbox").click(function () {

            $("div.list").hide();

            var Filter1Array = [];
            var Filter2Array = [];
            var Filter3Array = [];
            var Filter4Array = [];
            var filter1_Count = 0, filter2_Count = 0, filter3_Count = 0, filter4_Count = 0;

            $("#filter1 :checkbox:checked").each(function () {
                Filter1Array[filter1_Count] = $(this).val();
                filter1_Count++
            });

            $("#filter2 :checkbox:checked").each(function () {
                Filter2Array[filter2_Count] = $(this).val();
                filter2_Count++
            });

            $("#filter3 :checkbox:checked").each(function () {
                Filter3Array[filter3_Count] = $(this).val();
                filter3_Count++
            });

            $("#filter4 :checkbox:checked").each(function () {
                Filter4Array[filter4_Count] = $(this).val();
                filter4_Count++
            });

            var filter1string
            var filter2string
            var filter3string
            var filter4string

            var filter1checked = false
            var filter2checked = false
            var filter3checked = false
            var filter4checked = false

            if (filter1_Count == 0) { filter1_Count = 1; } else { filter1checked = true; }
            if (filter2_Count == 0) { filter2_Count = 1; } else { filter2checked = true; }
            if (filter3_Count == 0) { filter3_Count = 1; } else { filter3checked = true; }
            if (filter4_Count == 0) { filter4_Count = 1; } else { filter4checked = true; }

            for (f1 = 0; f1 < filter1_Count; f1++) {

                if (Filter1Array[f1] != null) { filter1string = '.' + Filter1Array[f1] } else { filter1string = '' }

                for (f2 = 0; f2 < filter2_Count; f2++) {

                    if (Filter2Array[f2] != null) { filter2string = '.' + Filter2Array[f2] } else { filter2string = '' }

                    for (f3 = 0; f3 < filter3_Count; f3++) {

                        if (Filter3Array[f3] != null) { filter3string = '.' + Filter3Array[f3] } else { filter3string = '' }

                        for (f4 = 0; f4 < filter4_Count; f4++) {

                            if (Filter4Array[f4] != null) { filter4string = '.' + Filter4Array[f4] } else { filter4string = '' }

                            var QueryString = filter1string + filter2string + filter3string + filter4string
                            $(QueryString).fadeIn('fast');
                        }
                    }
                }
            }

            if (!filter1checked && !filter2checked && !filter3checked && !filter4checked) {
                $("div.list").fadeIn('fast');
            };

            if ($('div.list:visible').length === 0) {
                $(".NoResults").html("<p class='error'>No products match your filter selections. Please try a different combination.</p>");
            }
            else { $(".NoResults").html(""); }

        });

        $('a.showall').click(function () {
            $("div.list").fadeIn('fast');
            $("#filter1 :checkbox").removeAttr('checked');
            $("#filter2 :checkbox").removeAttr('checked');
            $("#filter3 :checkbox").removeAttr('checked');
            $("#filter4 :checkbox").removeAttr('checked');
            $(".NoResults").html("");
            return false;
        });

    </script>
</body>
</html>

Answer 3

如何使用复选框的.click函数获取页面上所有选中复选框的关联值，并从中构建您的类字符串，即dark.riven.b.light.a - 这会起作用吗？ / p>

Answer 4

由于只选择了一个组中的一个项目，单选按钮似乎是合适的，然后只需在打开并单击时关闭一个。

我稍微修改了你的标记并添加了代码以反映“取消选中”单选按钮的能力。工作示例小提琴：http://jsfiddle.net/MarkSchultheiss/mBAaW/

广播多选

<div id="myRadios">
<ul id="colour">
    <li><label><input type="radio" name="colour" value="dark" >Dark</label></li>
    <li><label><input type="radio" name="colour" value="medium">Medium</label></li>
    <li><label><input type="radio" name="colour" value="light">Light</label></li>
</ul>

<ul id="finish">
<li><input type="radio" name="finish" value="smooth">Smooth</li>
<li><input type="radio" name="finish" value="riven">Riven</li>
<li><input type="radio" name="finish" value="honed">Honed</li>
</ul>

<ul id="price">
<li><input type="radio" name="price" value="a">Up to £25</li>
<li><input type="radio" name="price" value="b">£25 to £45</li>
<li><input type="radio" name="price" value="c">£45 to £65</li>
<li><input type="radio" name="price" value="d">£65 to £85</li>
<li><input type="radio" name="price" value="e">over £85</li>
</ul></div>
<div id="founditems">
<div class="dark smooth b">dark smooth b</div>
<div class="medium honed d">medium honed d</div>
<div class="dark smooth d">dark smooth d</div>
<div class="light smooth b">light smooth b</div>
<div class="light riven b">light riven b</div>
<div class="dark riven c">dark riven c</div>
<div class="medium riven a">medium riven a</div>
</div>
<div id="shower">empty</div>

示例代码：

// radio multi-select
var mycolors = [];
var myfinish = [];
var myprice = [];

function checkit(myarray, myclass) {
    var indisun = $.inArray(myclass, myarray);
    return indisun;
}
$("#colour,#finish,#price").on("click", ":radio", function(event) {

    $("#founditems div").hide();
    var mytarget = event.target;
    $("#shower").text("");
    if ($(mytarget).hasClass("iam")) {
        $(mytarget).parents("ul").find("input:radio").removeClass("iam");
        mytarget.checked = false;
    } else {
        $(mytarget).parents("ul").find("input:radio").removeClass("iam");
        $(mytarget).addClass("iam");
    };
    var mycurrent = [];
    var hasColor = $("#colour :radio:checked");
    var hasFinish = $("#finish :radio:checked");
    var hasPrice = $("#price :radio:checked");

    var radios = $("#colour :radio,#finish :radio,#price :radio");
    radios.filter(":checked").each(function() {
        var disun = $(this).val();
        mycurrent.push(disun);
    });
    $("#founditems div").removeClass("iam");

    $('#founditems div').each(function() {
        var adiv = $(this);
        $.each(mycurrent, function() {
            if (adiv.hasClass(this)) {
                adiv.addClass("iam");
            };
        });
    });
    //just to show current selection(s)
    $.each(mycurrent, function() {
        $("#shower").text($("#shower").text() + this);
    });
    var currCol = hasColor.length ? hasColor.val() : false;
    var currFin = hasFinish.length ? hasFinish.val() : false;
    var currPri = hasPrice.length ? hasPrice.val() : false;
    $.each(mycurrent, function() {
        var currVal = this;
        var itsaColor = checkit(mycolors, this);
        var itsaFinish = checkit(myfinish, this);
        var itsaPrice = checkit(myprice, this);
        $('#founditems div').each(function() {
            var adiv = $(this);
            if (adiv.hasClass(currVal)) {
                if (currCol && !adiv.hasClass(currCol) && itsaColor) {
                    adiv.removeClass("iam");
                }
                if (currFin && !adiv.hasClass(currFin) && itsaFinish) {
                    adiv.removeClass("iam");
                };
                if (currPri && !adiv.hasClass(currPri) && itsaPrice) {
                    adiv.removeClass("iam");
                };
            }
        });
    });

    $('#founditems div.iam').slideDown("slow");
});

jQuery多个复选框过滤器组

4 个答案: