使用jquery初始化自定义事件

Using jquery to initiate custom events

本文关键字：事件 自定义 初始化 jquery 使用      更新时间：2023-09-26

我试图在我的网站上使用音频播放器，我需要使用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;
}

根据你给出的链接，你必须使用.toggle()而不是.toggleClass

最后我得到了一些帮助。我只需要在正确的地方添加自定义事件，所以JS现在看起来像这样:

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