1

stackoverflow 启发了我使用复选框构建“类别过滤器”，但我坚持了一半。我想实现以下目标：三个类别（品牌、类别、颜色）由表内的三个“复选框列”表示：

<table id="filters" width="620px">
  <tr>
    <td width="144" align="left" valign="top">
    <input type="checkbox" value="Audi" id="filter-Audi" >Audi<br>
    <input type="checkbox" value="BMW" id="filter-BMW" >BMW<br>
    </td>
    <td width="233" align="left" valign="top">
    <input type="checkbox"  value="Compact" id="filter-Compact" >Compact<br>
    <input type="checkbox"  value="Limousine" id="filter-Limousine" >Limousine<br>
    <input type="checkbox"  value="SUV" id="filter-SUV" >SUV<br>
    <input type="checkbox"  value="Sport" id="filter-Sport" >Sport<br>
    </td>
    <td width="233" align="left" valign="top">
    <input type="checkbox"  value="silver" id="filter-silver" >silver<br>
    <input type="checkbox"  value="blue" id="filter-blue" >blue<br>
    <input type="checkbox"  value="red" id="filter-red" >red<br>
    <input type="checkbox"  value="white" id="filter-white" >white<br>
    </td>
  </tr>
</table>

根据选中的复选框，我想显示包含与选中的复选框 ID 相同的类名的某些 div。这已经在起作用了。我现在需要的是一种为每个类别制定“排除”过滤器的方法。

意味着，如果用户检查以下内容：

Audi & Limousine & red – 只有包含这些类别的 div 才会出现。在我的示例中，所有包含 Audi & Limousine & red apper 的 div 但当然也会出现 BMW div（这是错误的）。

换句话说：我需要一个额外的“过滤方法”，其中包括按每个类别分层的类：即：如果用户选中奥迪，第二和第三类别的复选框应该只引用包含奥迪的 div 类。如果用户选中 Audi & Compact & white，则出现的 div 至少必须包含所有三个类。

到目前为止的 jQuery 部分（在 stackoverflow 上找到了这个）：

$("#filters :checkbox").click(function() {
    var re = new RegExp($("#filters :checkbox:checked").map(function() {
        return this.value;
    }).get().join("|"));
    $.each($('.filterme'), function() {
        var $this = $(this);
        $this[re.source != "" && re.test($this.attr("class")) ? "slideDown" : "slideUp"]();
    });
});

我将现有代码推送到 jsfiddle：

http://jsfiddle.net/ar3PY/

如果有人可以在这里提供帮助，我会很高兴！

4

2 回答 2

1

试试这个：更改您的 HTML 以包含每个类别的类别（品牌、类别、颜色）

<table id="filters" width="620px">
  <tr>
    <td width="144" align="left" valign="top">
    <input type="checkbox" class="brand" value="Audi" id="filter-Audi" >Audi<br>
    <input type="checkbox" class="brand" value="BMW" id="filter-BMW" >BMW<br>
    </td>
    <td width="233" align="left" valign="top">
    <input type="checkbox" class="class" value="Compact" id="filter-Compact" >Compact<br>
    <input type="checkbox" class="class" value="Limousine" id="filter-Limousine" >Limousine<br>
    <input type="checkbox" class="class" value="SUV" id="filter-SUV" >SUV<br>
    <input type="checkbox" class="class" value="Sport" id="filter-Sport" >Sport<br>
    </td>
    <td width="233" align="left" valign="top">
    <input type="checkbox" class="color"  value="silver" id="filter-silver" >silver<br>
    <input type="checkbox" class="color"  value="blue" id="filter-blue" >blue<br>
    <input type="checkbox" class="color" value="red" id="filter-red" >red<br>
    <input type="checkbox" class="color" value="white" id="filter-white" >white<br>
    </td>
  </tr>
</table>

将您的 java 脚本代码更改为如下所示：

var getFilter = function(category) {
    var filter = $("#filters ." + category + ":checked").map(function() {
        return "." + this.value;
    }).get().join(",");
    filter = (filter.length > 0) ? filter : "*";
    console.log(filter);
    return filter;
}

$("#filters :checkbox").click(function() {
    var all = $(".filterme");
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
    all.not(tgts).slideUp();
    tgts.slideDown();
});

JSFiddle：http: //jsfiddle.net/ar3PY/2/

于 2012-07-11T17:14:38.990 回答
1

我对您的 html 进行了一些更改并得出了结果。我所做的更改是向 td 标签添加一个类，如下所示。

<table id="filters" width="620px">
  <tr>
    <td  class="car" width="144" align="left" valign="top">
    <input type="checkbox" value="Audi" id="filter-Audi" >Audi<br>
    <input type="checkbox" value="BMW" id="filter-BMW" >BMW<br>
    </td>
    <td  class="type" width="233" align="left" valign="top">
    <input type="checkbox"  value="Compact" id="filter-Compact" >Compact<br>
    <input type="checkbox"  value="Limousine" id="filter-Limousine" >Limousine<br>
    <input type="checkbox"  value="SUV" id="filter-SUV" >SUV<br>
    <input type="checkbox"  value="Sport" id="filter-Sport" >Sport<br>
    </td>
    <td  class="color" width="233" align="left" valign="top">
    <input type="checkbox"  value="silver" id="filter-silver" >silver<br>
    <input type="checkbox"  value="blue" id="filter-blue" >blue<br>
    <input type="checkbox"  value="red" id="filter-red" >red<br>
    <input type="checkbox"  value="white" id="filter-white" >white<br>
    </td>
  </tr>
</table>

接下来，我使用了 Chandu 答案的修改版本，按以下方式分别按类别过滤掉。

$("#filters :checkbox").click(function () {
            var filterCarString = $("#filters :checkbox:checked").length == 0 ? "*" :
            $("#filters .car :checkbox:checked").length == 0 ? "*" :
                   $("#filters .car :checkbox:checked").map(function () {
                       return "." + this.value;
                   }).get().join(",.");

            var filterTypeString = $("#filters :checkbox:checked").length == 0 ? "*" :
                    $("#filters .type :checkbox:checked").length == 0 ? "*" :
                   $("#filters .type :checkbox:checked").map(function () {
                       return "." + this.value;
                   }).get().join(",.");

            var filterColorString = $("#filters :checkbox:checked").length == 0 ? "*" :
                  $("#filters .color :checkbox:checked").length == 0 ? "*" :
                   $("#filters .color :checkbox:checked").map(function () {
                       return "." + this.value;
                   }).get().join(",.");


            var filterTgts = $('.filterme');
            var elems = filterTgts.filter(filterCarString);
                elems = elems.filter(filterTypeString);
                elems = elems.filter(filterColorString).slideDown();

            filterTgts.not(elems).slideUp();
 });

我希望这就是你要找的。

于 2012-07-11T18:30:57.017 回答