Javascript jQuery和multiple"；类别“；选择器

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>

$('#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:

<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>

$('#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');
});

#选择器{边距：10px 0；背景：eee；列表样式：无；填充：0px；}
#选择器li{显示：内联块；}
#选择器LIA{显示：块；边距：0 4px；填充：5px；背景：#aaa；}
#选择器li a.active{color:#fff；}
#元素{边距：0px；填充：0px；列表样式：无；背景：#eee；}
#元素{显示：内联块；宽度：100px；边距：4px；文本对齐：中心；背景：#ccc；填充：40px 0；}
#元素li.inactive{不透明度：0.2}

这段简单的代码显示了一个小界面，允许用户单击组选择器元素并高亮显示属于该组的所有元素。单击“其他组”按钮时，选择将更改。 从这一点开始，我想做的是能够使“活动”多个组选择器，同时单击属于这两个、三个或更多selecor元素的所有元素

换句话说，如果有人单击group1选择器，则会突出显示具有该类的元素。然后有人单击group2，并且只有属于这两个组的元素才会高亮显示。当有人“松开”组1选择器时，只有具有class2的元素才会高亮显示，等等。当没有任何组选择器被单击时，所有元素都具有100%不透明度

有人能告诉我从哪里开始，我应该如何从上面的代码开始吗

---

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

JS

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

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

CSS

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

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

---

我认为这比那复杂一点。我不认为当只选择了

group1

时，

1和2

或

1和3

应该是

活动的

，等等，当只选择了1时，1和2应该是活动的。这是正确的。该死，谢谢你，提利亚。过去几天我一直在想怎么做，现在我看到的答案很明显：）。再次感谢。最后一件事是-有没有一种简单的方法使所有元素不透明度：1当没有选择选择器按钮时？

#容器：不是（组1）：不是（.group2）：不是（.group3）#元素li

CSS很神奇；）我不明白这怎么能正常工作？例如，如果单击

2

和

3

，

1和3

将被赋予活动类，即使尚未选择

1

。我的理解是，它必须拥有所有选定的类，才能被赋予

活动类，还是我错了？