3

製品のリストに対して複雑なフィルタリングシステムを構築する必要があります。製品リストの基本構造は次のとおりです。

<ul id="prod-list">
    <li class="item type-brochure lang-english">Brochure: English</li>
    <li class="item type-folder lang-english lang-french">Folder: English, French</li>
    <li class="item type-bulletin lang-english">Bulletin: English</li>
    <li class="item type-folder lang-english lang-french">Folder: English, French</li>
    <li class="item type-folder lang-english">folder: English</li>
    <li class="item type-brochure lang-english lang-spanish">Brochure: English, Spanish</li>
    <li class="item type-brochure lang-english">Brochure: English</li>
    <li class="item type-folder lang-english">Folder: English</li>
    <li class="item type-bulletin lang-english">Bulletin: English</li>
</ul>

次に、タイプと言語フィルターごとにチェックボックスを設定します。

<p><strong>Filter by Type:</strong></p>
<p><input type="checkbox" id="type-brochure" /> <label for="type-brochure">Brochure</label></p>
<p><input type="checkbox" id="type-folder" /> <label for="type-folder">Folder</label></p>
<p><input type="checkbox" id="type-bulletin" /> <label for="type-bulletin">Bulletin</label></p>
...
<p><strong>Filter by Language:</strong></p>
<p><input type="checkbox" id="lang-english" /> <label for="lang-english">English</label></p>
<p><input type="checkbox" id="lang-spanish" /> <label for="lang-spanish">Spanish</label></p>
<p><input type="checkbox" id="lang-french" /> <label for="lang-french">French</label></p>
...

ご覧のとおり、各アイテムにはタイプがあり、次に言語があります。アイテムは複数のタイプと言語を持つことができます。

基本的に、タイプのチェックボックスをORステートメントとして機能させる必要があります（ユーザーがパンフレットとフォルダーのチェックボックスをオンにすると、すべてのパンフレットとフォルダーが一覧表示され、その他はすべて非表示になります）。

次に、言語のチェックボックスをANDステートメントとして機能させる必要があります（ユーザーが英語とフランス語のチェックボックスをオンにすると、英語とフランス語の両方の項目のみが表示され、他のすべての項目は非表示になります）。

このような他の質問を調べましたが、2つの異なるフィルタリング方法でそのようなものを機能させる方法がわかりません。フィルタは連携して機能する必要があります。たとえば、ユーザーがパンフレット、英語、フランス語をチェックすると、英語とフランス語の両方のパンフレットのみが表示されます。

誰かがこれを達成する方法について何かアドバイスがあれば、それは大いにありがたいです。

ありがとう

4

3 に答える 3

3

入力にクラスを追加する必要があります。この例では、適切な入力に「タイプ固有」と「言語固有」を追加しました。これが私の最適化されていないが読みやすいコードです。

$(function(){
    $('input').click(function(){
        $('#prod-list li').hide();
        var languages = '';
        $('.language-specific:checked').each(function(){
            languages += '.' + $(this).attr('id');
        });
        if($('.type-specific:checked').length > 0){
            $('.type-specific:checked').each(function(){
                $(languages+'.'+$(this).attr('id')).show();
                console.log(languages+'.'+ $(this).attr('id'));
            });
        } else {
            $(languages).show();
        }
    });
});

そして、これはフィドルの例です。すべてのロジックはjqueryセレクターで処理されます。

于 2012-12-17T16:04:33.447 に答える
2

これは次の方法で実現できます。

  • 空の jQuery オブジェクトから始めて、
  • 次に、チェックボックスを反復処理し、add()type-を呼び出して、OR フィルター処理された要素を蓄積します。
  • lang-次に、チェックボックスを反復処理し、filter()を呼び出して要素セットを減らします。

何かのようなもの：

function updateItems()
{
    var $matched;
    var $checkedTypeBoxes = $("input[type='checkbox'][id^='type-']:checked");
    if (!$checkedTypeBoxes.length) {
        $matched = $("#prod-list .item");
    } else {
        $matched = $();
        $checkedTypeBoxes.each(function() {
            // Add items of checked type.
            $matched = $matched.add("#prod-list .item." + this.id);
        });
    }
    $("input[type='checkbox'][id^='lang-']:checked").each(function() {
        // Filter out items that don't expose checked language.
        $matched = $matched.filter("." + this.id);
    });

    $("#prod-list .item").hide();
    $matched.show();
}

$(document).ready(function() {
    updateItems();
    $("input[type='checkbox']").change(function() {
        updateItems();
    });
});

このソリューションは、この fiddleでテストできます。

于 2012-12-17T16:07:32.587 に答える
1

フィルタリングを行うために必要な JavaScript は次のとおりです。

$(':checkbox').change(FindFilters);

function FindFilters() {
    var filterArray = [];
    //which checkboxes are checked?
    $(':checkbox').each(function () {
        var $this = $(this);
        if ($this.prop('checked')) {
            filterArray.push($this.prop('id'));
        }
    });

    console.log(filterArray);
    FilterList(filterArray);
}
function containsAll(needles, haystack){ 
    for(var i = 0 , len = needles.length; i < len; i++){
        if($.inArray(needles[i], haystack) == -1) return false;
    }
    return true;
}
function FilterList(filters) {
    if (filters.length > 0) {
        $('#prod-list li').each(function () {
            var $this = $(this),
                attributes = $this.prop('class').split(' ');

            if (containsAll(filters,attributes)) {
                $this.slideDown();
            } else {
                $this.slideUp();
            }
        });
    } else {
        $('#prod-list li').slideDown();
    }
}

ここにjsfiddleがあります：http://jsfiddle.net/Morlock0821/nxTPN/

于 2012-12-17T16:00:39.370 に答える