Javascript使用单选按钮过滤html元素的可见性
Javascript filter visibility of html elements using radio buttons
我看到过许多使用复选框和单选按钮过滤以显示不同类的例子。问题是两个选定的类与任何一个类的所有元素都会显示,但我希望它只显示两个类的元素。下面是一些示例代码: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"answers"red"被选中,那么显示的元素应该是"red green",或者如果"two"answers"blue" - "red blue"answers"red blue green"。有什么想法吗?
需要多个类选择器。例如,对于one
和red
类,它看起来像.one.red
。它同时针对具有这两个类的元素。所以你应该改变你的类选择器:
var goodClasses = colors.join("");
演示:http://jsfiddle.net/DH3m3/1/
相关文章:
- 将元素的可见性绑定到另一个元素
- 通过单选按钮状态设置HTML元素的可见性
- 如何切换DIV元素的可见性
- 如何切换文档元素的可见性
- 使用 jQuery 切换 2 个元素的可见性
- 是否可以在可见性隐藏元素上对幻灯片进行动画处理
- 使用 jQuery 检查 DOM 元素的继承可见性
- 使用 elementFromPoint() 方法检查元素可见性
- 我无法测试在我的主干视图中渲染的元素的可见性
- 取消设置元素可见性,更改 innerHTML,然后转换回来
- 我应该在隐藏元素之前检查可见性吗?
- 如何正确评估“if”语句的元素可见性不透明度隐藏性
- 如何检查表达式中的元素可见性
- 如何在phantomjs中等待元素可见性
- 使用jQuery设置元素可见性
- 当垃圾邮件与悬停事件时,元素可见性的问题
- 切换元素可见性的Angular指令
- 基于元素可见性显示/隐藏警告
- 基于布尔值在ember-js中切换元素可见性
- 根据验证结果切换元素可见性