隐藏基于属性值的元素

时间:2012-10-02 20:22:49

标签: jquery jquery-selectors

我有一个按钮,我用来在显示是/否'在政策'divs之间切换

<form>
<input type="radio" id="Policy0" name="Policy" value="0" onclick="filterHotel();"><label for="Policy0">All</label>
</form>
<script type="application/javascript">
var Policy = $('input:radio[name=Policy]:checked').val()
if (Policy == 0) {  
 $('form [data-policy="0"]').toggle();              
}
</script>

<div id="24448" data-policy="0">Data here</div>
<div id="24448" data-policy="1">Data here</div>

使用上面的代码我可以成功显示/隐藏正确的div,但我的问题是我不想将我的输入包装在表单元素中。有没有办法根据属性中的值进行引用?

我已经尝试$('input[attr=data-policy][value="0"]').toggle();,但这似乎不起作用。我确定我错过了一些简单的事情,有人能指出我正确的方向吗?

编辑:$('input[data-policy="0"]').toggle();不起作用,我没有收到错误,但它没有隐藏属性为data=policy="0"的div我也试过data-policy=0没有运气

4 个答案:

答案 0 :(得分:9)

这应该足够了:

$('[data-policy="0"]').toggle(); 

有关详细信息,您可以查看Attribute Equals Selector [name="value"]文档

答案 1 :(得分:1)

看看这里:http://api.jquery.com/attribute-equals-selector/

实质上,您希望使用属性名称,如下所示:

$('input[data-policy="0"]').toggle();

希望有所帮助。

答案 2 :(得分:0)

正确的CSS(以及jQuery)选择器是[attribute=value],因此,要选择data-policy="0"项,您应该使用[data-policy=0]

其他可用的选择器是“有属性”:[attribute],“包含”:[attribute*=value],“以”开头:[attribute^=value]和“以...结尾”:[attribute$=value]

答案 3 :(得分:0)

ID是唯一的,为什么不使用ID?

var Policy = $('#Policy0:checked').val();
$('#Policy0').toggle(Policy===0);