jquery - 选中其他内容时设置样式

Question

示例如下:

<div class="control-group">
    <span class="radio">
       <input type="radio" class="input_radio" >
    </span>
    <label class="color_btn">
    <div class="inner_value"></div>
    </label>
</div>

在上面的示例中，我需要在检查输入时使用 box-shadow 到带有 class=inner_value 的 div。对此有什么想法吗？

Answer 1

如果您将 input 从 span 中拉出，那么您可以使用兄弟选择器单独使用 CSS 来完成此操作。

input:checked + .color_btn .inner_value {
  box-shadow: 0 5px 5px #000;
}

<div class="control-group">
  <input type="radio" class="input_radio" >
  <label class="color_btn">
  <div class="inner_value">inner_value</div>
  </label>
</div>

这里有一种使用 javascript 的方法，通过将事件处理程序添加到 input，然后为影子分配一个类。

document.getElementById('radio').addEventListener('click',function() {
  document.getElementsByClassName('inner_value')[0].classList.add('shadow');
});

.shadow {
  box-shadow: 0 5px 5px #000;
}

<div class="control-group">
    <span class="radio">
       <input type="radio" class="input_radio" id="radio">
    </span>
    <label class="color_btn">
    <div class="inner_value">inner_value</div>
    </label>
</div>