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

我已将颜色添加到.far类

.open .far {
  color: red;
}

JS

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

您可以在.far或.fas类上使用CSS规则来获得所需的输出。

See this fiddle

编辑

如果有两个按钮，则可以向第二个按钮添加另一个类，并使用see this fiddle

这样的CSS选择器进行播放

Answer 2

您可以使用CSS规则来实现：

.liketoggle i.fas {
  color: red;
}

http://jsfiddle.net/c2qa04og

Answer 3

您可以通过简单地添加两个类（如“ like”和“ unlike”），添加所需的颜色并在单击时切换它们来实现此目的。

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

您所能做的就是点击图标。请参阅以下早期文章： Toggle icon on button via JavaScript

希望这会有所帮助

HTML-Javascript-单击

4 个答案: