如何解决HTML5音频标签+ jQuery:切换活动按钮
||<div id=\"audio-player\">
<div>
<img id=\"playButton\"
onclick=\"document.getElementById(\'stars\').play();
document.getElementById(\'playButton\').toggle(
function(){ $(this).attr(\"src\",\"playbutton-active.png\"); },function(){ $(this).attr(\"src\",\"playbutton-inactive.png\"); } );\"
src=\"playbutton-inactive.png\">
<img id=\"pauseButton\"
onclick=\"document.getElementById(\'stars\').pause();
document.getElementById(\'pauseButton\').toggle(
function(){ $(this).attr(\"src\",\"pausebutton-active.png\"); },\"pausebutton-inactive.png\"); } );\"
src=\"pausebutton-inactive.png\">
<img id=\"stopButton\"
onclick=\"document.getElementById(\'stars\').pause();
document.getElementById(\'stars\').currentTime = 0;
document.getElementById(\'stopButton\').toggle(
function(){ $(this).attr(\"src\",\"stopbutton-active.png\"); },\"stopbutton-inactive.png\"); } );\"
src=\"stopbutton-inactive.png\">
</div>
<audio id=\"stars\">
<source src=\"stars-in-the-night-sky.mp3\">
<source src=\"stars-in-the-night-sky.ogg\">
</audio>
我也尝试使用$(this).toggle来代替getElementById(\'playButton \'),但是活动/不活动图像不会切换。当我没有切换语句时,自定义按钮可以启动/暂停/停止音频。添加切换开关后,尽管显示了最初的非活动控件图像,但控件不再起作用。我也意识到,当切换一个按钮时,我需要一个单独的功能来重置其他按钮。
解决方法
您应该尝试\“ $(\”#playButton \“)。toggle(..); \”。
您需要有一个JQuery对象...
使用此方法,而不是:
<script type=\"text/javascript\">
$(document).ready(function(){
$(\"#playButton\").click(function(){
$(this).toggle(..);
});
});
</script>
您还可以看到JQuery-ui及其“按钮”方法!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。