Question

我遇到了一个问题..

我正在尝试为元素列表创建过滤系统。每个元素都有不同的类。例如，每个元素都有一个类的形状和一个颜色的类。例如：

<img class="Square Red" src="Bearwithme.jpeg">
<img class="Square Blue" src="Bearwithme.jpeg">
<img class="Circle Red" src="Bearwithme.jpeg">
<img class="Circle Blue" src="Bearwithme.jpeg">

在导航栏上，我会使用复选框来隐藏每个元素，如下所示：

 <input id="Squares" type="checkbox">
    <input id="Circles" type="checkbox">
    <input id="Red" type="checkbox">
    <input id="Blue" type="checkbox">

这是我到目前为止的功能：

$(document).ready(function(){
    $("#Red").click(function(){
    $(".Red").toggle(this.checked);
    });
    $("#Blue").click(function(){
    $(".Blue").toggle(this.checked);
    });
    $("#Circle").click(function(){
    $(".Circle").toggle(this.checked);
    });
    $("#Square").click(function(){
    $(".Square").toggle(this.checked);
    });

});

如果选中方形复选框和蓝色复选框，如果我决定选中红色复选框，我将如何阻止红色圆圈显示？

以下是一个工作示例http://jsfiddle.net/JB3kM/1/

Answer 1

看看this fiddle。

我想说你最好的做法是获取所有复选框的值，显示所有元素，然后隐藏那些没有满足所有条件的复选框。

$("input[type='checkbox']").click(function(){

    var red = $("input#Red").prop("checked");
    var blue = $("input#Blue").prop("checked");
    var sq = $("input#Squares").prop("checked");
    var cir = $("input#Circles").prop("checked");

    //Toggle all on
    $("div.red, div.square, div.blue, div.circle").show();

    //Toggle off
    if(!red)
        $("div.red").hide();
    if(!blue)
        $("div.blue").hide();
    if(!sq)
        $("div.square").hide();
    if(!cir)
        $("div.circle").hide();

});

如果使用复选框切换，如何保持类隐藏

1 个答案: