Не могу разобраться.
Мне нужно чтобы parent label менял свой стиль.
Решение взял отсюда -
https://stackoverflow.com/questions/45338238/how-t...
html
<div class="switch-color" style="display: none;">
<ul>
<li class=""><span class="dot dot-black"></span><span class="color-name">Черный</span></li>
<li class="active"><span class="dot dot-white"></span><span class="color-name">Белый</span></li>
</ul>
</div>
<div class="switch-color">
<label class="switch-color-item item-white active">Белый<input type="radio" name="radio-color" checked><span class="checkmark"></span></label>
<label class="switch-color-item item-black">Черный<input type="radio" name="radio-color"><span class="checkmark"></span></label>
</div>
let colors = document.getElementsByClassName("switch-color-item");
for (let i = 0; i < colors.length; i++) {
colors[i].addEventListener("change", colorChange(colors[i]));
}
function colorChange(evt){
let trg = evt.target;
let trg_par = trg.parentElement;
if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) {
let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' );
if ( prior ) {
prior.parentElement.classList.remove( "active" );
}
trg_par.classList.add( "active" );
}
}
Конечный код:
let form = document.getElementById("orderForm");
form.addEventListener("change", ( evt ) => {
let trg = evt.target,
trg_par = trg.parentElement;
if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) {
let prior = form.querySelector( 'label.active input[name="radio-color"]' );
if ( prior ) {
prior.parentElement.classList.remove( "active" );
}
trg_par.classList.add( "active" );
}
}, false);
Если я удаляю старый кусок html кода который с display:none;
То все перестает работать :(