HTML - Javascript - Изменить цвет значка после нажатия

Question

В этом jsfiddle я хочу изменить цвет значка на красный, если он понравился (на «непохожем»), и установить цвет на черный, если на «лайк»:

HTML

<button type="submit" class="btn btn-custom btn-sm liketoggle" name="like"><span>Like</span> <i class="fas fa-heart"></i></button>

JS:

 $(".liketoggle").click(function() {
   $(this).find("i").toggleClass("fas far");
   $(this).find("span").text(function(i, v) {
     return v === 'Like' ? 'Unlike' : 'Like'
   })
 });

CSS

body {
  padding: 5em;
}

Демонстрационная версия: https://jsfiddle.net/khrismuc/apbknwgf/12

Answer 1

Что вы можете сделать, это переключать значки при нажатии.Смотрите предыдущие сообщения по адресу: Переключить значок на кнопке с помощью JavaScript

Надеюсь, это поможет

Answer 2

Вы можете достичь этого с помощью правила CSS:

.liketoggle i.fas {
  color: red;
}

http://jsfiddle.net/c2qa04og

Answer 3

Вы можете сделать это, просто добавив два класса «как» и «не похож», добавив нужные цвета и переключая их по щелчку.

CSS:

.like .fa-heart{
  color: red;
}
.unlike .fa-heart{
  color: black;
}

JS:

 $(".liketoggle").click(function() {
   $(this).toggleClass("like unlike");
   $(this).find("span").text(function(i, v) {
     return v === 'Like' ? 'Unlike' : 'Like'
   })
 });

http://jsfiddle.net/fv9ds8a3/

Answer 4

Я добавил цвет в класс .far

.open .far {
  color: red;
}

JS

 $(".liketoggle").click(function() {
   $(this).toggleClass("open");
   $(this).find("span").text(function(i, v) {
     return v === 'Like' ? 'Unlike' : 'Like'
   })
 });

Вы можете играть по правилам css в классе .far или .fas, чтобыполучить желаемый результат.

См. эту скрипку

РЕДАКТИРОВАТЬ

Если у вас есть две кнопки, вы можете добавить другуюКласс до второй кнопки и играть с CSS-селекторами, как это, см. эту скрипку