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类中仍然是，并且在新选择的li班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/

JS添加动作来改变类

1 个答案: