Переключение между шрифтом потрясающие иконки - PullRequest
Новая
       6

Переключение между шрифтом потрясающие иконки

0 голосов
/ 31 августа 2018

Я пытаюсь переключаться между иконками, используя юникод. Я не уверен, что я делаю не так, я попытался переключиться, используя вместо этого их className, что мне тоже не помогло, любые ответы приветствуются. (Я хотел бы использовать ванильный JavaScript только без JQuery) 

const burger = document.getElementById('toggle');

burger.addEventListener('click', (e) => {
  const tog = e.target;
  if (tog.innerHTML === "&#xf0c9") {
    nav.style.display = "flex";
    tog.innerHTML = "&#xf00d";
  } else {
    nav.style.display = "none";
  }

});
<header class="navbar">
  <i class="fa" id="toggle">&#xf0c9</i>

  <nav class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Gallery</a>
    <a href="#">Contact</a>
    <a href="#">Search</a>
  </nav>
</header>

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

@ AlexandreJ предоставил решение.

Но что, если вы хотите запустить функцию с определенным классом CSS и запустить другую функцию с другим классом CSS?

Вы можете сделать что-то вроде этого: 

// fa-bars <-> fa-close

function toggleBetweenTwoClasses(el, c1, c2) {
  var currentClass = el.getAttribute("class");
  var newClass;
  if (currentClass.indexOf(c1) !== -1) {
    newClass = currentClass.replace(c1, c2);
    // Do stuff 1
  }
  if (currentClass.indexOf(c2) !== -1) {
    newClass = currentClass.replace(c2, c1);
    // Do stuff 2
  }
  el.setAttribute("class", newClass);
}

function myToggleBetweenTwoClasses(el, c1, c2) {
  toggleBetweenTwoClasses(document.getElementById("toggle"), "fa-bars", "fa-close");
}

var icon = document.getElementById("toggle");


icon.addEventListener("click", myToggleBetweenTwoClasses);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<header class="navbar">
  <i class="fa fa-bars" id="toggle"></i>
  <nav class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Gallery</a>
    <a href="#">Contact</a>
    <a href="#">Search</a>
  </nav>
</header>
0 голосов
/ 31 августа 2018

Переключение между классами с помощью classList.toggle 

let burger = document.getElementById('mybtn');

function toggleBetweenClasses(el, c1, c2) {
  el.classList.toggle(c1);
  el.classList.toggle(c2);
}

function myToggleBetweenClasses(el, c1, c2) {
  toggleBetweenClasses(burger, "fa-bars", "fa-times");
}

burger.addEventListener('click', myToggleBetweenClasses);
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<i class="fas fa-bars" id="mybtn"></i>
...