javascript - 替换部分类名

Question

我正在尝试创建一个音乐播放器按钮。当音乐没有播放时，按钮有一个“播放”图标，当音乐正在播放时，按钮会切换为“音乐”图标。我使用的图标是“Font Awesome”。

<i class="fa fa-play" aria-hidden="true"></i>
// This is a play icon
<i class="fa fa-music" aria-hidden="true"></i>
// This is a music icon

所以我只需要替换部分类名(将播放替换为音乐)，对吗？似乎有点难以完成。我想知道这是否是实现按钮的好方法。(我现在仍在努力编写代码...)如果您能给我一些建议，我将不胜感激!!

Answer 1

JavaScript/示例 1

使用 classList.toggle() 在一个<i>

var fa = document.querySelector('i');

fa.addEventListener('click', function(e) {
  this.classList.toggle('fa-play');
  this.classList.toggle('fa-music');
}, false);

<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css">



<i class="fa fa-play" aria-hidden="true"></i>

jQuery/示例 2

使用 .toggleClass() 在一个<i> (这对具有双类的多个 <i> 也有效)

$('.fa-play, .fa-music').on('click', function() {
  $(this).toggleClass('fa-play fa-music');
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css">


<i class="fa fa-play" aria-hidden="true"></i><br/>
<i class="fa fa-play" aria-hidden="true"></i><br/>
<i class="fa fa-play" aria-hidden="true"></i>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>