Question

我正在尝试在我的网站上使用音频播放器，我需要使用jquery使图像充当播放/暂停按钮。

目前我正在使用JS和CSS图像精灵来点击时更改图像。因此，开始时图像显示为播放按钮，当它第一次成为暂停按钮时单击它。然后如果它再次点击它就会变成播放按钮等。

第一次点击它会播放音频播放器中的曲目，但是如果再次点击它就不会暂停它。

理想情况下，我需要这样做才能点击按钮时播放曲目然后再次点击暂停播放。

音频播放器带有自定义事件，我相信这些事件可以用来实现我的目标，但我不太确定如何实现播放和暂停事件。

可以在此处找到自定义事件： http://radykal.de/codecanyon/fullwidthaudioplayer/#api

下面是我正在使用的当前JS和CSS。

JS

<script type = "text/javascript">
 jQuery(document).ready(function() {
   jQuery(".fap-single-track").click(function() {
      jQuery(this).toggleClass('playing');
   });
});
  </script>

CSS

.fap-single-track {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}

.playing{
background-position: -27px 0;
}

.playing:hover {
background-position: -27px -28px !important;
}

.play_pause:hover {
background-position: 0 -28px;
}

非常感谢任何帮助。

Answer 1

根据您提供的链接，您必须使用 .toggle（）而不是 .toggleClass

Answer 2

我最终得到了一点帮助。我只需要在正确的位置添加自定义事件，所以JS现在看起来像这样：

<script type = "text/javascript">
jQuery(document).ready(function() {
jQuery(".fap-single-track").click(function() {
    jQuery(this).toggleClass('playing');
  jQuery.fullwidthAudioPlayer.toggle();
});
});
</script>

使用jquery启动自定义事件

2 个答案: