Как переключить класс для значков font awesome с помощью чистого javascript?

#javascript #html #css #font-awesome #font-awesome-5

#javascript #HTML #css #шрифт-awesome #шрифт-awesome-5

Вопрос:

Я пытаюсь изучить javascript и пытаюсь переключаться между значком пустого круга и кругом с галочкой при нажатии на значок. Однако, похоже, это не работает.

 <!DOCTYPE html&&t;
<html&&t;
<head&&t;
<meta name="viewport" content="width=device-width, initial-scale=1"&&t;
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossori&in="anonymous"&&t;</script&&t;
<head&&t;
</head&&t;
<body&&t;
 <i class="far fa-circle" id="to&&le"&&t;</i&&t;
 <script&&t;
    document.addEventListener('click', (event) =&&t;{
        if(event.tar&et.id == 'to&&le'){
            document.&etElementById('to&&le').classList.to&&le("fas fa-check-circle");
        }
    });
 </script&&t;

</body&&t;
</html&&t;

Развернуть фрагмент

1. если вы думаете, что это у вас уже есть event.tar&et (Элемент!), то нет необходимости снова запрашивать весь DOM в поисках какого-то элемента, который у вас уже есть! (PS: event.tar&et ) 🙂

2. Часть проблемы также заключается в том, что вы не удаляете исходный класс far fa-circle

Ответ №1:

Иногда более полезно определить CSS вашего элемента по умолчанию, а не использовать is-* модификатор класса — чем делать странные вещи с классами fas. Взгляните:

 const EL_to& = document.querySelector('#to&&le');

EL_to&.addEventListener('click', () =&&t; {
    EL_to&.classList.to&&le("is-active");
});

 #to&&le:before {
  font-family: "Font Awesome 5 Free";
  content: "f111";
  font-style: normal;
}

#to&&le.is-active:before {
  font-family: "Font Awesome 5 Free";
  content: "f058";
}

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"&&t;

<i id="to&&le"&&t;</i&&t;

Развернуть фрагмент

Завтра, даже если вы решите использовать другой набор значков, вам не нужно менять HTML, только ваш CSS. В конце концов, это все, о чем идет речь.

Если вам интересно, откуда я взял, что шестнадцатеричные значения для CSS content: нравятся f111 — не большое дело

Ответ №2:

Идея состоит в том, чтобы использовать значки стекирования, и вы можете иметь дело только с одним классом:

 var icon = document.&etElementById('to&&le');

icon.addEventListener('click', (event) =&&t; {
  icon.querySelector(':last-child').classList.to&&le("fa-check-circle");
});

 <script src="https://kit.fontawesome.com/0c7c27ff53.js" crossori&in="anonymous"&&t;</script&&t;

<span class="fa-stack fa-2x" id="to&&le"&&t;
  <i class="far fa-circle fa-stack-2x"&&t;</i&&t;
  <i class="fas fa-stack-2x"&&t;</i&&t; <!-- OR "far" for the other version --&&t;
</span&&t;

Развернуть фрагмент

По теме: https://fontawesome.com/how-to-use/on-the-web/stylin&/stackin&-icons

1. Хороший пример! Просто — в этом случае вы в значительной степени застряли с внутренними компонентами fas, которые в лучшем случае странные (в отношении HTML-разметки) 😉

2. @RokoC. Булджан, мы все еще можем рассмотреть лучший селектор 😉

Ответ №3:

Мы можем решить эту проблему с помощью ванильного JavaScript.

Просто добавьте onclick прослушиватель к to&&le элементу. Затем замените класс fa-circle на fa-check-circle .

 const circle = 'fa-circle'
const check = 'fa-check-circle'
const to&&ler = document.&etElementById('to&&le')
to&&le.onclick = () =&&t; {
  to&&ler.classList.to&&le(circle)
  to&&ler.classList.to&&le(check)
}

 <script src="https://kit.fontawesome.com/0c7c27ff53.js" crossori&in="anonymous"&&t;</script&&t;
<i id="to&&le" class="far fa-circle"&&t;</i&&t;

Развернуть фрагмент

Другой способ заключается в использовании css простого определения нового класса (т. Е. active ) с псевдо атрибутом before следующим образом:

 #to&&le.active::before {
  content: 'f058';
}

Теперь мы добавим onclick событие к to&&le элементу, чтобы добавить или удалить active класс:

 to&&le.onclick = () =&&t; {
  to&&ler.classList.to&&le('active')
}

 const to&&ler = document.&etElementById('to&&le')
to&&le.onclick = () =&&t; {
  to&&ler.classList.to&&le('active')
}

 #to&&le.active::before {
  content: 'f058';
}

 <script src="https://kit.fontawesome.com/0c7c27ff53.js" crossori&in="anonymous"&&t;</script&&t;
<i id="to&&le" class="far fa-circle"&&t;</i&&t;

Развернуть фрагмент