Question

我正在尝试为某些内容创建过滤器但是我不知道如何解决这个问题： http://codepen.io/anon/pen/aOPPaB

HTML

<span class="toggle" id="red">Toggle red</span>
<span class="toggle" id="blue">Toggle blue</span>
<span class="toggle" id="big">Toggle Big</span>
<span class="toggle" id="small">Toggle Small</span>
<div id="content" class="red small"></div>
<div id="content" class="red big"></div>
<div id="content" class="blue small"></div>
<div id="content" class="blue big"></div>

JS

$(".toggle").click(function() {
    var id = $(this).attr('id');
    $("." + id).toggle();
});

当我尝试单独切换尺寸或颜色时，它工作正常但如果我试图将它们混合起来，它就无法正常工作。

如果我点击“切换红色”和“切换小”，它应该只显示大蓝色。

Answer 1

它的工作方式toggle应该有效例如，单击red后，将隐藏第一个和第二个div，并显示第3个和第4个：

<div id="content" class="red small" style="display: none;"></div>
<div id="content" class="red big" style="display: none;"></div>
<div id="content" class="blue small"></div>
<div id="content" class="blue big"></div>

然后，如果您点击big，那么big类的每个元素都会被切换，所以如果red big拥有display: none;，现在它将是{{} 1}}，而display: block现在将blue big，因此您的结果将是：

display: none

为确保您拥有“多重过滤器”，您可能需要在按钮上添加切换的信息，然后仅切换（或显示/隐藏）与您所有过滤相关的元素。

<div id="content" class="red small" style="display: none;"></div>
<div id="content" class="red big" style="display: block;"></div>
<div id="content" class="blue small"></div>
<div id="content" class="blue big" style="display: none;"></div>

如果您点击$(".toggle").click(function() { $(this).toggleClass('toggled'); toggledIds = [] $('.toggled').each(function(i, e){ toggledIds[toggledIds.length] = $(e).attr('id') }); // Now you can do whatever you want with the list of the ids });，然后点击red，然后点击big，您将获得blue

Multifilter Jquery

1 个答案: