Блог

Главная - Вопросы по программированию - Если элемент локального хранилища, добавьте класс ко всем родительским элементам — vanilla js

Если элемент локального хранилища, добавьте класс ко всем родительским элементам — vanilla js

#javascript #local-storage

#javascript #local-storage

Вопрос:

Я хочу добавить класс «active» к родителям всех входных элементов с классом «ct-sw-input» и состоянием, проверенным, если localStorage.GetItem(‘theme’) === ‘dark’ в чистом js.

В jquery у меня было

 $(".ct-sw-input").prop("checked", true).closest("label").addClass("active");

Но в vanilla js я попробовал следующий код и пока безуспешно:

 var root = document.getElementsByTagName('html')[0];
var switcher = document.getElementsByClassName('ct-sw-input');


for (var i=0; i < switcher.length; i  ) {
    if (localStorage.getItem('theme') === 'dark') {
        switcher[i].parentElement.classList.add("active");
        switcher[i].checked = true;
    } else {
        switcher[i].parentElement.classList.remove("active");
        switcher[i].checked = false;
    }   
}   

//this part works
if (localStorage.getItem('theme') === 'dark') {
    root.classList.remove("light-mode");
    root.classList.add("dark-mode");        
} else {
    root.classList.remove("dark-mode");
    root.classList.add("light-mode");
}

HTML

 <label class="switch" title="Dark Skin">                    
   <input type="checkbox" id="ct-sw" class="ct-sw-input">       
   <span class="slider"></span>
</label>

демонстрация jsfiddle

Комментарии:

1. можете ли вы также предоставить структуру html?

2. Вам нужно убрать точку в '.ct-sw-input' ; имя класса ct-sw-input , но вы используете селектор.

3. измените getElementsByClassName на Document.querySelectorAll или удалите точку из .ct-sw-inpu

4. Я попробовал и то , и другое . querySelectorAll и getElementsByClassName , с точкой или без нее и все еще не работают.

5. Пожалуйста, добавьте упомянутый CSS