2

При клике на элемент li осуществляется смена его стиля, ему присваивается класс checked, который изменяет его. Как сохранить эти изменения, с помощью localStorage. В интернете есть много решений данной проблемы на jquery, но меня интересует только clean JS. Так же прошу заметить, что у меня нет checkbox. Клик происходит на сам элемент списка li. Помогите пожалуйста!

     selectedItems: function() {
         var allLi = document.getElementsByTagName('li');
         for(var i = 0; i < allLi.length; i++) {
             allLi[i].onclick = function(ev) {
                var a = ev.target.classList.toggle('checked');
             }
         }
     }



     li.checked {
          text-decoration: line-through;
          background-color: rgba(112, 195, 95, 0.9);
          border: 1px solid #d6e9c6;
     }

1 ответ 1

2

Написал небольшой скриптик для вас на нативном JS:

(function (window, document, undefined) {
    'use strict';
    if (!('localStorage' in window)) return;
    var checkedMode = localStorage.getItem('checkedMode');
    if (checkedMode) {
        document.documentElement.className += ' checked';
    }
})(window, document);


(function (window, document, undefined) {

    'use strict';

    // Feature test
    if (!('localStorage' in window)) return;

    // Get our newly insert toggle
    var checkedMode = document.getElementsByTagName('li');
    if (!checkedMode) return;

    // When clicked, checked mode on or off
    checkedMode.addEventListener('click', function (event) {
        event.preventDefault();
        document.documentElement.classList.toggle('checked');
        if ( document.documentElement.classList.contains('checked') ) {
            localStorage.setItem('checkedMode', true);
            return;
        }
        localStorage.removeItem('checkedMode');
    }, false);

})(window, document);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.