JS Aktion hinzufügen Klasse ändern

Question

Auf meiner Website habe ich Paar div mit Eingang, standardmäßig eine dieser Radiobutton ausgewählt und Spanne oben Eingang hat Klasse checked

Es ist wie folgt aussehen:

<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> 

jetzt für das Label, wo span.checked I hinzugefügt werden soll für das Element <li class="vir"> Klasse test so füge ich diesen Code:

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

Wenn die Seite in d geladen Standard-Optionsklasse test wird li hinzugefügt, aber wenn ich auf eine andere Radio-Button-Klasse nicht änderte, in alten li Klasse ist immer noch, und in neuen li Klasse test nicht angezeigt. Wie kann ich diese Aktion meinem Code hinzufügen?

Answer 1

müssen Sie das Kontrollkästchen für die Änderung aussehen als Ihr Code

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 
}); 

besser laufen können Sie die volle jQuery

Demo

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

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