Jquery - 单击链接时突出​​显示具有相同类的所有div

Question

我正在尝试使用jQuery设置一些东西，这将允许我从链接列表中选择一种颜色，并让它突出显示所有具有此颜色作为类的div。这就是我到目前为止......

<ul class="mybuttons">
    <li><a href="#" class="link red">Red</a></li>
    <li><a href="#" class="link green">Green</a></li>
    <li><a href="#" class="link yellow">Yellow</a></li>
    <li><a href="#" class="link blue">Blue</a></li>
    <li><a href="#" class="link orange">Orange</a></li>
</ul>

<div class="test red blue">Red - Blue</div>
<div class="test blue">Blue</div>
<div class="test yellow">Yellow</div>
<div class="test blue yellow">Blue - Yellow</div>
<div class="test orange">Orange</div>
<div class="test red">Red</div>
<div class="test yellow">Yellow</div>
<div class="test green blue">Green - Blue</div>
<div class="test orange">Orange</div>
<div class="test yellow">Yellow</div>
<div class="test green">Green</div>
<div class="test blue">Blue</div>

-

$( ".link.blue" ).click(function() {
 $(".test.blue").toggleClass("main");
 $(".link.blue").toggleClass("active");
});

$( ".link.red" ).click(function() {
$(".test.red").toggleClass("main");
$(".link.red").toggleClass("active");
});

$( ".link.yellow" ).click(function() {
$(".test.yellow").toggleClass("main");
$(".link.yellow").toggleClass("active");
});

$( ".link.orange" ).click(function() {
$(".test.orange").toggleClass("main");
$(".link.orange").toggleClass("active");
});

$( ".link.green" ).click(function() {
$(".test.green").toggleClass("main");
$(".link.green").toggleClass("active");
});

-

.test{height:30px;width:250px;background:lightgrey;margin-bottom:10px;border:black 1px solid;text-align:center}

.link{opacity:.5;}
.main{background:blue;color:white;}
.active{opacity:1;}

.link.red{background:red;color:white;width:50px;height:30px;text-decoration:none;}
.link.green{background:green;green:white;width:50px;height:30px;text-decoration:none;}
.link.yellow{background:yellow;color:black;width:50px;height:30px;text-decoration:none;}
.link.blue{background:blue;color:white;width:50px;height:30px;text-decoration:none;}
.link.orange{background:orange;color:white;width:50px;height:30px;text-decoration:none;}

http://jsfiddle.net/box7ddu/q0f7w8zj/

它几乎可以工作，但是如果你突出显示所有的颜色，那么并不是所有的div都被突出显示，而且，我非常确定我这样做的方式并不是最有效的。谁能看到我做错了什么？

Answer 1

就个人而言，我会将颜色存储在data-*属性中，并使用它来决定哪些.test元素将处于活动状态：

<强> HTML

<ul class="mybuttons">
    <li><a href="#" data-col="red" class="link red">Red</a></li>
    <li><a href="#" data-col="green" class="link green">Green</a></li>
    <li><a href="#" data-col="yellow" class="link yellow">Yellow</a></li>
    <li><a href="#" data-col="blue" class="link blue">Blue</a></li>
    <li><a href="#" data-col="orange" class="link orange">Orange</a></li>
</ul>

<强>的JavaScript

$links = $('.link');
$links.click(function(e) {
    //Get our variables, simply $(this) and the colour
    var $this = $(this),
        color = $this.data('col');

    //Toggle the active class on this link
    $this.toggleClass('active');

    //Remove .main on all .test's
    $(".test").removeClass("main");

    //Map the active link's data-col with a dot attributes to an array
    //Join it up to make a selector
    var selector = $links.filter('.active').map(function(){
        return "."+$(this).data('col');
    }).get().join();

    //Add the class back on to matches
    $(selector).addClass('main');

    //Finally, prevent the default action
    //Lest you jump to the top of the page
    e.preventDefault();
});

JSFiddle