javascript - 使用 javascript 更改父 span 元素的类名

Question

如何在单击输入单选按钮时更改父 span 元素的类名。

<label for="L">
     <span class="lbllevel1">
         <span class="label-size">L</span>
          <input id="L" name="size" type="radio" value="L">
      </span>
 </label>

我想将“选定”类添加到单击单选按钮时具有类“lbllevel1”的 span 元素。

基本上，我需要输出为 <span class="lbllevel1 selected">单击单选按钮时

Answer 1

您可以为单击事件或更改事件的单选按钮添加事件监听器，使用 document.getElementById('L') 获取输入，并在事件处理函数内使用 e .currentTarget 要获取当前点击的输入，您可以使用 .classList += 向元素添加类，如下所示:

var input = document.getElementById('L');
input.addEventListener("click", function(e){
   e.currentTarget.parentElement.classList += ' selected';
})

.selected{
background-color:#888888;
}

<label for="L">
 <span class="lbllevel1">
     <span class="label-size">L</span>
      <input id="L" name="size" type="radio" value="L">
  </span>
 </label>