Question

我正在尝试创建一个音乐播放器按钮。当muisc没有播放时，该按钮具有“播放”图标，并且在播放音乐时切换到“音乐”图标。我使用的图标是“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

在<i>

上使用classList.toggle()

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery /示例2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

function toggleClass(sender) {
  $(sender).toggleClass('fa-play fa-music')
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" onclick="toggleClass(this)"></i>

＆＃13;

替换类名的一部分

2 个答案: