4

html:

<ul id="selector">
    <li><a href="#" class="group1" rel="group1">group 1</a></li>
    <li><a href="#" class="group2" rel="group2">group 2</a></li>
    <li><a href="#" class="group3" rel="group3">group 3</a></li>    
</ul>
<ul id="elements">
    <li class="group1">1</li>
    <li class="group1 group2">1 and 2</li>
    <li class="group3">3</li>
    <li class="group1 group3">1 and 3</li>
    <li class="group2 group3">2 and 3</li>
    <li class="group2">2</li>
</ul>

jQuery:

$('#selector a').click(function(event){
    event.preventDefault();
    var $this = $(this),
        target = $this.attr('rel');
    $('#selector a').removeClass('active');
    $this.addClass('active');
    $('#elements li').addClass('inactive');
    $('#elements li.'+target).removeClass('inactive').addClass('active');
});

CSS:

#selector {margin: 10px 0; background: #eee; list-style: none; padding: 0px;}
#selector li {display: inline-block;}
#selector li a {display: block; margin: 0 4px; padding: 5px; background: #aaa;}
#selector li a.active {color: #fff;}

#elements {margin: 0px; padding: 0px; list-style: none; background: #eee;}
#elements li {display: inline-block; width: 100px; margin: 4px; text-align: center; background: #ccc; padding: 40px 0;}
#elements li.inactive {opacity: 0.2}

この単純なコードは、ユーザーがグループ セレクター要素をクリックして、そのグループに属するすべての要素を強調表示できるようにする小さなインターフェイスを示しています。他のグループ ボタンをクリックすると、選択が変更されます。この時点からやりたいことは、複数のグループ セレクターを「アクティブ」にすると同時に、クリックした 2 つ、3 つ、またはそれ以上のセレクター要素に属するすべての要素を強調表示できるようにすることです。

つまり、誰かが group1 セレクターをクリックすると、そのクラスを持つ要素が強調表示されます。誰かが group2 をクリックすると、両方のグループに属する要素のみが強調表示されます。誰かがグループ 1 セレクターを「クリック解除」すると、class2 を持つ要素のみが強調表示されます。グループ セレクターのいずれもクリックされていない場合、すべての要素の不透明度は 100% になります。

どこから始めて、上記のコードからどのように進める必要があるかを誰かに教えてもらえますか?

http://jsfiddle.net/Cyber​​ek/MeG6S/で、現在どのように機能するかのサンプルをご覧ください。

4

1 に答える 1

3

これを行う方法は、すべてをコンテナーにラップし、それにクラスを追加して、それを使用して関連するアイテムのスタイルを設定します。このすべてのクラス操作の代わりに、クリックされたクラスを切り替えるだけです。

jsフィドル

JS

$('#selector a').click(function(event){
    event.preventDefault();
    var group = this.className;
    $('#container').toggleClass(group);
});

CSS

#container #elements li {opacity: 0.2}
#container.group1 #elements .group1,
#container.group2 #elements .group2,
#container.group3 #elements .group3 {opacity:1;}

#container.group1 #selector .group1,
#container.group2 #selector .group2,
#container.group3 #selector .group3{border:1px solid #000;}

拡大

1 と 2 の両方がアクティブなときに「1 と 2」のみをアクティブにしたい場合は、このように拡張してすべてのベースをカバーできます。5 つ以上のグループがある場合は、JavaScript の代替手段が適している可能性があります。

jsフィドル

#container.group1 #elements .group1:not(.group2):not(.group3),
#container.group2 #elements .group2:not(.group1):not(.group3),
#container.group3 #elements .group3:not(.group1):not(.group2),
#container.group1.group2:not(.group3) #elements .group1.group2:not(.group3),
#container.group2.group3:not(.group1) #elements .group2.group3:not(.group1),
#container.group3.group1:not(.group2) #elements .group3.group1:not(.group2),
#container.group1.group2.group3 #elements .group1,
#container.group1.group2.group3 #elements .group2,
#container.group1.group2.group3 #elements .group3,
#container:not(.group1):not(.group2):not(.group3) #elements li {opacity:1;}
于 2013-03-28T09:02:10.740 に答える