我的网页上的单选按钮作为过滤器,单选按钮被隐藏,我只是显示标签。 代码如下所示:
<div class="filter">
<div class="field_row label-selected">
<input id="field_6_95_0" class="filteDataForSerialize" type="radio" value="0" name="f[g][6]">
<label for="field_6_95_0">Option 1</label>
</div>
<div class="field_row">
<input id="field_6_95_1" class="filteDataForSerialize" type="radio" value="1" name="f[g][6]">
<label for="field_6_95_1">Option 2</label>
</div>
<div class="field_row">
<input id="field_6_95_2" class="filteDataForSerialize" type="radio" value="2" name="f[g][6]">
<label for="field_6_95_2">Option 3</label>
</div>
</div>
我使用以下脚本:
jQuery('.filter div:first').addClass('label-selected');
jQuery('.filter label').on('click', function() {
var parent_div = jQuery(this).parent().addClass('label-selected');
jQuery('.filter').find('div').not(parent_div).removeClass('label-selected');
});
因此,默认情况下,第一个元素获得了标签选择的类,当我选择任何其他将获得该类并且脚本从另一个中删除时。它有效,直到我在同一页面中使用相同的html片段更多次。在这种情况下,jQuery从页面中删除每个标签选择的类。
我认为Css并不影响它,但是:
.field_row > input{display:none};
.field_row > label{display:block;cursor:pointer;padding: 5px 10px;}
.label-selected > label{bacground-color:#000;color:#fff;}
答案 0 :(得分:2)
您可以从所有标签的父siblings中删除该课程。
jQuery('.filter label').on('click', function() {
var parent_div = jQuery(this).parent().addClass('label-selected');
parent_div.siblings().removeClass('label-selected');
});