[英]jQuery add and remove class for parent element (multiple times in one page)
我的網頁上的單選按鈕是過濾器,單選按鈕是隱藏的,我只顯示標簽。 代碼如下:
<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;}
您可以從標簽的所有父級兄弟姐妹中刪除該類。
jQuery('.filter label').on('click', function() {
var parent_div = jQuery(this).parent().addClass('label-selected');
parent_div.siblings().removeClass('label-selected');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.