JS 添加动作改变类

Question

在我的网站上，我有几个带有输入的 div，默认情况下，此单选按钮之一被选中，并且输入上方的跨度具有类 checked

看起来像：

<label>
<li class="vir">
<div class="radio">
<span class=""><input type="radio" class="attribute_radio" name="group_4" value="34"></span>
</div>
</li>
</label>

//default option span.checked below

<label>
<li class="vir">
<div class="radio">
<span class="checked"><input type="radio" class="attribute_radio" name="group_4" value="34"></span>
</div>
</li>
</label>

现在对于 span.checked 所在的标签，我想为元素添加 <li class="vir"> 类 test 所以我添加了以下代码：

<script type="text/jscript">
$(function() {
  var x =document.querySelectorAll('span.checked');
[].forEach.call(x, function(span) {
  span.parentElement.parentElement.classList.add('test');
});
});
</script>

当页面在默认选项类中加载时test 被添加到li 但是，当我点击另一个单选按钮类没有改变时，旧的li 类仍然存在，而在新选择的@ 987654329@ class test 没有出现。如何将此操作添加到我的代码中？

Answer 1

你需要在复选框中寻找变化而不是运行你的代码

https://api.jquery.com/change/

Demo

$(function() {
  $('span input:radio').change(function() {
    if (this.checked) { // if radio button is checked
      var x = document.querySelectorAll('li.vir');
      [].forEach.call(x, function(li) { // looping over all li with class vir
          li.classList.remove('test'); // remove class test from li
      });
      this.parentElement.parentElement.parentElement.classList.add('test');
    }
  }).change(); // .change will run for the 1st time when page loads
});

你可以更好地使用完整的 jQuery

Demo

$(function() {
  $('span input:radio').change(function() {
    if (this.checked) { // if radio button is checked
      $('li.vir').removeClass('test'); //remove class test from li
      $(this).closest('li').addClass('test'); // add class test to li
    }
  }).change(); // .change will run for the 1st time when page loads
});

https://api.jquery.com/addclass/

https://api.jquery.com/removeclass/