javascript - 如何在点击时更改图标？

Question

我的页面上有一个如下所示的按钮:https://pierdzialka.misumi.me/d2TVS.png单击它后，将调用 playPreview() 来播放音频文件。

var preview = document.getElementById("BeatmapPreview");
var isPlaying = false;

function playPreview() {
 if (isPlaying) {
  preview.pause();
  classList.toggle("play");
 } else {
  preview.play();
  classList.toggle("pause");
 }
};

preview.onplaying = function() {
 isPlaying = true;
};

preview.onpause = function() {
 isPlaying = false;
};

我也试图让它在点击时将图标类从播放更改为暂停，代码在这里:

<a onclick="playPreview()" class="ui blue labeled icon button">
  <i class="play icon"></i> 
  {{ $.T "Play" }}
</a>

我怎样才能做到这一点？

最后一件事也是实际播放的音频，它被放置得更远，就是这样:

<audio id="BeatmapPreview">
  <source src="https://misumi.me/preview/{{ .Beatmapset.ID }}.mp3">
</audio>

Answer 1

试试这个 document.getElementById('yourIconElementId').classList.toggle("play");

在 classList 之前添加您的图标元素选择器