0

Добрый день. Есть кнопка меню

`<div class="grid__menu">
   <i class="material-icons md-48 menu__button">dashboard</i>
 </div>`

при клике на которую, я хочу поменять класс menu__button на menu__button--active Поменять класс можно и так

 var activeModificator = '--active';
 function toggle (className, active) {
     var name = className.replace(/\./g, '');
     var activeName = (active === undefined) ? activeModificator : active;
   if (name.indexOf(activeName) == -1) {       
      document.querySelector(className).classList.add(name+activeModificator);
      document.querySelector(className).classList.remove(name);    
   } else {      
document.querySelector(className).classList.add(name);
document.querySelector(className).classList.remove(name-activeModificator);
    } 
}

Но в функцию мне надо передать имя класса, которое надо взять из строки <i class="material-icons md-48 menu__button">dashboard</i>

Как мне получить имя класса из document.querySelector(".menu__button");? Там ведь сначала будет menu__button, а потом menu__button--active? И после первого изменения класс будет другой. Какой алгоритм вообще? Без jQuery

Пример на jsFiddle

3
  • "Там ведь сначала будет menu__button, а потом menu__button? "
    – SVE
    26 июн 2016 в 14:07
  • Исправил, извините
    – Slip
    26 июн 2016 в 14:12
  • обновил ответ.. 26 июн 2016 в 14:17

1 ответ 1

1

Решение типовое, обновлено

document.querySelector('.grid__menu i').addEventListener('click', function() {
  classToggle('menu__button', '--active', this);
}, false)

function classToggle(a, b, elem) {
  console.log(elem);
  elem.classList.remove(a);
  elem.classList.add(a + b);
}
.menu__button {
  border: 2px solid red;
}
.menu__button--active {
  border: 2px solid green;
  background-color: yellow;
}
<div class="grid__menu">
  <i class="material-icons md-48 menu__button">dashboard</i>
</div>

2
  • А если у меня не будет <div class="grid__menu"> ? Можно как-нибудь из classList вытащить существующий сейчас?
    – Slip
    26 июн 2016 в 14:18
  • И, кстати, этот код не меняет обратно при следующем нажатии. Т.е. не toggle выходит. В любом случае спасибо, конечно
    – Slip
    26 июн 2016 в 14:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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