如何在点击时更改图标？

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>

- zukyo

Answer 1

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

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

- GMKHussain

---

当您按下播放按钮时，它会将图标切换为暂停，但一旦您再次按下它后，它就会保持在暂停状态。有什么原因吗？ - zukyo

当我检查元素并按下它时，大约按4次左右它就会起作用，只是循环似乎非常奇怪。 - zukyo

在你按下它之前，这个类是播放图标，一旦你按下它，它就变成了播放图标暂停（奇怪的是它显示了暂停图标），再按一次暂停，它就变成了只有图标，导致一个空白图标，再按一次它就回到了播放图标。 - zukyo