1

stackoverflow は、チェックボックスを使用して「カテゴリ フィルター」を構築するように促し、途中で立ち往生しました。私は次のことを達成したい: 3 つのカテゴリ (ブランド、クラス、色) は、テーブル内の 3 つの「チェックボックス列」によって提示されます。

<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 も表示されます (これは間違っています)。

つまり、カテゴリごとにクラスを階層的に含む追加の「フィルタリング方法」が必要です。つまり、ユーザーが Audi をチェックした場合、2 番目と 3 番目のカテゴリのチェックボックスは、Audi を含む div クラスのみを参照する必要があります。ユーザーが Audi & Compact & white をチェックした場合、表示される div には少なくとも 3 つのクラスすべてが含まれている必要があります。

これまでの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にいくつかの変更を加え、結果を思いつきました。私が行った変更は、以下のように 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>

次に、チャンドゥの回答の修正版を使用して、次の方法でカテゴリ別に個別に除外しました。

$("#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 に答える
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 に答える