javascript - jQuery 和多个 "category"选择器

Question

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}

这段简单的代码显示了一个小界面，允许用户单击组选择器元素并突出显示属于该组的所有元素。单击其他组按钮时，选择会发生变化。 从这一点出发，我想做的是能够使多个组选择器“处于事件状态”，同时突出显示属于所单击的两个、三个或更多选择器元素的所有元素。

换句话说 - 有人点击 group1 选择器 - 具有该类的元素被突出显示。比有人点击 group2 - 只有属于这两个组的元素被突出显示。当有人“取消点击”group1 选择器时，只有具有 class2 的元素会突出显示等。当没有任何组选择器被单击时 - 所有元素都具有 100% 的不透明度。

谁能告诉我从哪里开始以及我应该如何从上面的代码开始？

http://jsfiddle.net/Cyberek/MeG6S/了解它现在是如何工作的示例。

Answer 1

这是一种方法，将所有内容包装在一个容器中并向其中添加类，使用它来设置相关项的样式。我们可以简单地切换被点击的类，而不是所有这些类操作。

jsFiddle

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 替代方案可能会更好。

jsFiddle

#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;}