2

コントロールには 3 つのカテゴリがあり、それぞれに複数のオプションがあります。

    <ul class="series-selector-items">
        <li id="filter-type-A">A</li>
        <li id="filter-type-B">B</li>
        <li id="filter-type-C">C</li>
    </ul>
    <ul class="series-selector-items">
        <li id="filter-type-E">E</li>
        <li id="filter-type-F">F</li>
        <li id="filter-type-G">G</li>
    </ul>
    <ul class="series-selector-items">
       <li id="filter-type-H">H</li>
       <li id="filter-type-I">I</li>
       <li id="filter-type-J">J</li>
       <li id="filter-type-K">K</li>
    </ul>

次に、上記のコントロールの属性を組み合わせたアイテムのリストを作成します。

    <ul>
     <li class="A E H">Item AEH</li>
     <li class="A F I">Item AFI</li>
     <li class="A G J">Item AGJ</li>
     <li class="A G H">Item AGH</li>
     <li class="B E H">Item BEH</li>
     <li class="B F H">Item BFH</li>
     <li class="B F H">Item BFH</li>
     <li class="C E I">Item CEI</li>
     <li class="C G K">Item CEI</li>
etc etc...
    </ul>

選択したコントロール オプションの組み合わせに基づいて結果をフィルター処理する方法を見つけようとしています。コントロール オプション (例: AEH) の任意の組み合わせを選択し、正しい属性 (item AEH) を持つすべてのアイテムを表示できるようにする必要があります。

複数のオプションを各カテゴリ (ABEK) で選択できるようにし、カテゴリが連携して要素の正しい組み合わせを持つオプションを表示する必要があります。同じカテゴリから複数のオプションが選択されている場合でも、それらの結果が表示されます。コントロール リストを li として作成しましたが、チェックボックスにすることもできます。

jQueryでこれを行う最良の方法は何ですか?

編集:これは、選択したオプションを配列に追加する、これまでに試した1つのアプローチです:

var seriesSelected = [];    
$('ul.series-selector-items').click(function(){

            //Select the series clicked and give it the "selected" class
            $(this).toggleClass("selected");

            //Once selected, add the series to the seriesSelected array
            if ($(this).hasClass('selected')) {
               seriesSelected.push($(this).attr('id'));
            }
            //If de-selecting (by toggling off the "selected class"), then remove from the seriesSelected array
            else {
                seriesToRemove = $(this).attr('id');
                seriesSelected = $.grep(seriesSelected, function(value) {
                return seriesToRemove != value;
               });
            }
        });

そこからどこへ行けばいいのかわからない...

4

4 に答える 4

0

ここでは、上記のクエリのわかりやすいスクリプトを使用して、いくつかの手順で完全なビンを作成しました。あなたは以下のようにデモリンクを見つけることができます：

デモ： http ：//codebins.com/bin/4ldqp90

HTML：

<!-- Select Category Combinators -->
<ul class="series-selector-items">
  <li id="filter-type-A">
    A
  </li>
  <li id="filter-type-B">
    B
  </li>
  <li id="filter-type-C">
    C
  </li>
</ul>
<ul class="series-selector-items">
  <li id="filter-type-E">
    E
  </li>
  <li id="filter-type-F">
    F
  </li>
  <li id="filter-type-G">
    G
  </li>
</ul>
<ul class="series-selector-items">
  <li id="filter-type-H">
    H
  </li>
  <li id="filter-type-I">
    I
  </li>
  <li id="filter-type-J">
    J
  </li>
  <li id="filter-type-K">
    K
  </li>
</ul>
<!-- Search Item from Follwing List based on selected category combinator-->
<ul class="list">
  <li class="A B H">
    Item ABH
  </li>
  <li class="A E H">
    Item AEH
  </li>
  <li class="A F I">
    Item AFI
  </li>
  <li class="A G J">
    Item AGJ
  </li>
  <li class="A G H">
    Item AGH
  </li>
  <li class="B C I">
    Item BCI
  </li>
  <li class="B E H">
    Item BEH
  </li>
  <li class="B F H">
    Item BFH
  </li>
  <li class="C B K">
    Item CBK
  </li>
  <li class="C E I">
    Item CEI
  </li>
  <li class="C G K">
    Item CGK
  </li>
</ul>

CSS：

.series-selector-items{
  display:inline-block;
  list-style:none;
  border:1px solid #3355f9;
  margin:0px;
  padding:0px;
  vertical-align:top;
  background:#fba5a2;
}
.series-selector-items li{
  padding:5px;
}
.series-selector-items li.selected{
  background:#f855f9;
}
.list{
  display:inline-block;
  list-style:none;
  border:1px solid #3355f9;
  margin:0px;
  padding:0px;
  vertical-align:top;
  background:#abd5f9;

}
.list li.searched{
  background: #3344ad;
  color:#dfdbab;
}
.list li{
  padding:3px;
}

jQuery：

$(function() {

     $(".series-selector-items li").click(function() {

            //Set Default UnSearched List
            $(".list li").removeClass("searched");

            var seriesSelected = new Array();
            //Select the series clicked and give it the "selected" class
            $(this).toggleClass("selected");

            //Get All selected combinators 
            $("li.selected").each(function() {
                seriesSelected.push($.trim($(this).attr('id')).replace('filter-type-', ''));

            });


            //Combinator Exists Then...
            if (seriesSelected.length == 3) {

                //Generate Class Name Combination
                var ClassNames = "." + seriesSelected[0] + "." + seriesSelected[1] + "." + seriesSelected[2];

                //Search Item based on Combinator
                if ($(".list li" + ClassNames).length > 0) {
                    //if Found then add Searched Class on Item
                    $(".list li" + ClassNames).addClass("searched");
                }

            } else {
                $(".list li").removeClass("searched");
            }


    });

});

デモ： http ：//codebins.com/bin/4ldqp90

于 2012-08-01T13:11:52.373 に答える
0

たぶん次のようなもの：

$('li').not($("#sec li")).on('click', function() {
    if ($('.active').length < 3) {
        $(this).toggleClass('active');
        var letters=[];
        $('.active').each(function(i,e) {
            letters.push(e.id.replace('filter-type-',''));
        });
        if ($('.active').length == 3) {
            var elms = $('#sec li').filter(function() {
                if ($(this).is('.'+letters[0])&&$(this).is('.'+letters[1])&&$(this).is('.'+letters[2])) {
                    return this;
                }
            }).show();
            $('#sec li').not(elms).hide();
        }else{
            $('#sec li').hide();                               
        }
    }else{
        if ($(this).is('.active')) $(this).removeClass('active');
    }
});​

フィドル

于 2012-08-01T02:02:35.183 に答える
0

さらに優れたフィルタリングで更新

function filterItems() {
    var classSelectors = $(".selected").map(function() {
        var cls = this.id.split('-');
        return '.' + cls.splice(2).join('-');
    }).toArray().join('');

    if (classSelectors) {
        $('#items > li').filter(classSelectors).show('slow');
        $('#items > li').not(classSelectors).hide('slow');
    }
    else {
        //if no filter, show all
        $('#items > li').show('slow');
    }
}​

更新されたデモ

$(document).ready(function() {
    $(".series-selector-items > li").click(function() {
        $(this).toggleClass('selected');
        filterItems();
    });
});

function filterItems() {
    var classSelectors = $(".selected").map(function() {
        var cls = this.id.split('-');
        return '.'+cls.splice(2).join('-');
    }).toArray();

    //if no filter, show all
    if(!classSelectors.length){
        $('#items > li').show('slow');
    }

    $('#items > li').filter(classSelectors.join('')).show('slow');

    $('#items > li').not(function() {
        var self = this;
        var showThis = true;
        $.each(classSelectors, function(i,value) {
            if(!$(self).is(value)) {
                showThis = false;
            }
        });
        return showThis;
    }).hide('slow');
}
​
于 2012-08-01T02:00:45.490 に答える
0

これが私の解決策です：http://jsfiddle.net/NukGM/2/お楽しみください！

文字をクリックすると、選択した文字 (赤) が、選択した ID を配列に蓄積します。各選択の後、別のメソッドが呼び出され、選択された ID 配列に存在するクラスの結果が強調表示されます。

于 2012-08-01T02:13:46.900 に答える