2

Задача в том, чтобы при клике на кнопку, сохранять её id и применять её для элементов nav__elem, чтобы при нажатии например на <button id="module-1"> применялся класс selected к этой кнопке, а также Добавлялся класс selected и к <span class="nav__elem module-1">nav elem 1</span> и чтобы при перезагрузке страницы изменения сохранились, но если кликнуть по активной кнопки то удалился selected класс с кнопки и nav__elem module-1. Не используя es6, может быть выбрано несколько элементов, не только один

<div class="nav">
  <span class="nav__elem module-1">nav elem 1</span>
  <span class="nav__elem module-2">nav elem 2</span>
  <span class="nav__elem module-3">nav elem 3</span>
</div>
<div class="btns">
  <button id="module-1">elem 1</button>
  <button id="module-2">elem 2</button>
  <button id="module-3">elem 3</button>
</div>

2 ответа 2

2

Здесь пример не будет работать... Вопрос решил не без помощи коллег...

let button = document.getElementsByClassName("button");
let module = document.getElementsByClassName("module");

var elem = [];
for (let i = 0; i < button.length; i++) {
  button[i].addEventListener("click", function() {
    module[i].classList.toggle("selected");
    button[i].classList.toggle("selected");
    elem = [];
    for (let i = 0; i < button.length; i++) {
      if (button[i].classList.contains("selected")) {
        elem.push(i);
      }
    }
    localStorage.setItem("elem", JSON.stringify(elem));
  });
}

window.onload = function() {
  if (localStorage.getItem("elem")) {
    var elemZ = localStorage.getItem("elem");
    var lsArr = JSON.parse(elemZ);
    for (let i = 0; i < lsArr.length; i++) {
      button[lsArr[i]].classList.add("selected");
      module[lsArr[i]].classList.add("selected");
    }
  }
};
<div class="nav">
  <span class="nav__elem module module-1">nav elem 1</span>
  <span class="nav__elem module module-2">nav elem 2</span>
  <span class="nav__elem module module-3">nav elem 3</span>
</div>
<div class="btns">
  <button class="button" id="module-1">elem 1</button>
  <button class="button" id="module-2">elem 2</button>
  <button class="button" id="module-3">elem 3</button>
</div>

8
  • можно без es6 пожалуйста показать как сделать нужно
    – dmitriy
    8 мар 2018 в 19:16
  • Минутку... щас покажу...
    – Air
    8 мар 2018 в 19:21
  • спасибо работает отлично, у меня только вопрос, тут можно чтобы было выбрано несколько элементов, не только один, можно и больше, я пытаюсь поправить ваш код но чтото не выходит
    – dmitriy
    8 мар 2018 в 19:58
  • Dima Vleskov, объясни толком..какие элем?
    – Air
    8 мар 2018 в 20:16
  • можно чтобы было не только например elem 1(nav elem1), выбран, а можно несколько выбрать elem1(nav elem1), elem2(nav elem2)... а щас только один елемент может быть активный
    – dmitriy
    8 мар 2018 в 20:19
1

я решил эту проблему через localStorage:

function initModules() {
       if (localStorage.getItem('favModules')) {
            var favModules = JSON.parse(window.localStorage.getItem('favModules'));
            for (let i = 0; i < favModules.length; i++) {
                  $("#"+favModules[i]).addClass("selected");
                  $("."+favModules[i]).addClass("selected");
                }
        } else {
            return false;
        } 
    };
    initModules();

    function setModules() {
       var favModules = [];
        $("button").click(function () {
            if (!$(this).hasClass("selected")) {
                var elem = $(this).attr("id");
                $(this).addClass("selected");
                $("." + elem).addClass("selected");
            } else {
                var elem = $(this).attr("id");
                $(this).removeClass("selected");
                $("." + elem).removeClass("selected");
            }
            favModules = [];
            $("button.selected").each(function () {
                var self = $(this).attr("id");
                favModules.push(self);
            });

            window.localStorage.setItem('favModules', JSON.stringify(favModules));
        }); 
    };
    setModules();
1
  • Ну и намучился, благодарю за вопрос... Мне было интересно его решить))) Но решил не без помощи...
    – Air
    9 мар 2018 в 12:21

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.