Question

我一直在研究一个jquery片段，它根据单击的按钮按类突出显示div。在堆栈用户的帮助下，我就在这一点......

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

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

-

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

-

$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
    e.preventDefault();
});

-

http://jsfiddle.net/oGeez/q0f7w8zj/3/

我想要实现的下一个阶段是，如果选择了多个链接，则只突出显示包含这两个链接的div。

例如，如果选择了蓝色和黄色链接，那么应该突出显示的唯一div是......

<div class="test blue yellow">Blue - Yellow</div>

任何人都有一个例子，或者可以指向一些阅读方向试图实现这个目标吗？

Answer 1

你非常接近，你需要做的就是更新一行：

更改}).get().join();

至}).get().join('');

不向join提供separtor会导致用逗号分隔的字符串作为联合选择器。省略逗号会导致交叉，因此元素必须包含所有类。

Answer 2

只需删除＆＃34;，＆＃34;它包含在选择器中，它将按预期工作：

var selector = $links.filter('.active').map(function(){
    return "."+$(this).data('col');
}).get().join().replace(/,/g,"");

您可以在此处查看示例：http://jsfiddle.net/q0f7w8zj/4/

jQuery - 在单击按钮时突出显示包含类的div

2 个答案: