javascript - 如何将 CSS 样式应用于 Div 的同级标签字段？

Question

基于下面的 HTML 代码，带有类 iradio_square-green checked 的 Div我需要以某种方式制作 <label>在该类 checked 时，在上面它对该 Label 应用了某种 CSS 样式。存在于标签下方的 Div 中。

<label for="indoor-backing-radio-2">
    <span>Clear Backing</span>
</label><br>

<div class="iradio_square-green checked" style="position: relative;">
    // other code
</div>

所以当 Div 有一个类 checked然后是 <label>该 Div 正上方的字段需要应用 border: 4px solid #559A08; 的样式到 <label> .

我不确定这是否可以仅使用 CSS 完成，或者是否需要 JavaScript？在任何一种情况下，我都可以使用一些帮助来获得此功能。一旦我让它运行起来，它将适用于数百个领域。感谢您的帮助

Answer 1

plugin您正在使用的事件提供了一个名为 ifToggled 的事件。您可以为此事件提供回调，以切换相应标签上的“已检查”类:

var labels = document.getElementsByTagName('label');

$('input').iCheck({
    checkboxClass: 'icheckbox_polaris',
    radioClass: 'iradio_polaris'
});

$('input').on('ifToggled', function(event){

    // find the corresponding label of this input and toggle the class
    for(var j = 0;j < labels.length;j++){
        if(labels[j].htmlFor === event.currentTarget.id){
            $(labels[j]).toggleClass('checked');
            break;
        }
    }
});

演示 here .

以这种方式查找标签意味着您无需依赖 DOM 元素的特定顺序。