Javascript使用单选按钮过滤html元素的可见性

时间:2014-07-01 19:08:14

标签: javascript html filter show

我见过许多使用复选框和单选按钮进行过滤的示例,以显示不同的类。问题是两个选定的类,所有带有任一类的元素都会显示,但我希望它只显示带有BOTH类的元素。以下是一些示例代码:http://jsfiddle.net/DH3m3/

js:

function filterItems() {
    var colors = $(":radio:checked").map( function(){ return this.value; }).get();
    var goodClasses = colors.join(",");
    $(".item").hide().filter(goodClasses).show();
}

filterItems();

$(":radio").change(filterItems);

和html:

<label for="one">one</label><input id="one" type="radio" name="number" value=".one" />
<label for="two">two</label><input id="two" type="radio" name="number" value=".two" />
<label for="none">none</label><input id="none" type="radio" name="number" value=".none" />
<hr/>
<label for="red">red</label><input id="red" type="radio" name="color" value=".red" />
<label for="blue">blue</label><input id="blue" type="radio" name="color" value=".blue" />
<label for="green">green</label><input id="green" type="radio" name="color" value=".green" />
<label for="non">none</label><input id="non" type="radio" name="color" value=".none" />
<hr/>
<div class="item one yellow">yellow</div>
<div class="item two red">red</div>
<div class="item one blue">blue</div>
<div class="item two green">green</div>
<div class="item one red green">red green</div>
<div class="item two red blue">red blue</div>
<div class="item one blue green">blue green</div>
<div class="item two red blue green">red blue green</div>

所以在这个例子中,我想如果选择“one”和“red”,应显示的元素将是“red green”,或者如果是“two”和“blue” - “red blue” “和”红蓝绿“。有什么想法或想法吗?

1 个答案:

答案 0 :(得分:0)

你想要multiple class selector。例如,对于类onered,它看起来像.one.red。它同时针对两个类的元素。所以你应该改变你的类选择器:

var goodClasses = colors.join("");

演示:http://jsfiddle.net/DH3m3/1/