javascript - Jquery 切换两个或多个类

Question

由于我的英语水平有限，很难解释我尝试做什么。所以只看代码:

http://jsfiddle.net/mZV7R/1/

$( "input" ).on( "click", function() {
    $( "."+$(this).attr('value') ).toggle();
});

选中 Man 复选框后，将显示 Man 元素。当 Man 和 Woman 都被选中时，则不应显示任何内容。

该怎么做？

我想做一些类似 AND 操作的事情，并且具有 CSS 类的可见性。但是浏览器渲染引擎似乎做了一个OR操作。

Answer 1

尝试

$("input").on("click", function () {
    var selector = $('input[name="human"]:checked').map(function () {
        return '.' + this.value;
    }).get().join('')
    $('div').hide().filter(selector).show();
});

演示:Fiddle

---

清理

<input type="checkbox" name="human" value="man">Man<br>
<input type="checkbox" name="human" value="woman">Woman<br>
<input type="checkbox" name="human" value="tall">Tall<br>
<input type="checkbox" name="human" value="short">Short


<div class="human tall man">Tall Man</div>
<div class="human short man">Short Man</div>
<div class="human tall woman">Tall Woman</div>
<div class="human short woman">Short Woman</div>

然后

var $humans = $('div.human');
$('input[name="human"]').on("click", function () {
    var selector = $('input[name="human"]:checked').map(function () {
        return '.' + this.value;
    }).get().join('')
    $humans.hide().filter(selector).show();
});

演示:Fiddle