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

jQuery和多个“类别”选择器

1 个答案:

扩展