时间戳

首页 > 解决方案 > 如何更改点击图标？

javascript - 如何更改点击图标？

问题描述

我的页面上有一个按钮，如下所示：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>

标签： javascripthtml

解决方案

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

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

推荐阅读