Question

由于我英语的限制，很难解释我尝试做什么。所以只需看看代码：

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

选中Man复选框后，将显示Man项目。当男人和女人都被检查时，则不应显示任何内容。

怎么做？

我希望使用CSS类可见性执行类似 AND 操作的操作。但是浏览器渲染引擎似乎执行了 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

Jquery切换两个或更多类

1 个答案: