[英]issue with jquery handling html5 elements loaded by jinja (django)
我正在尝试使用django创建一个媒体播放器,而jquery能够拿起第一首曲目,它无法接收其余的曲目
HTML
{% if tracksurl %}
{% for tracks in tracksurl %}
<audio class="playsong" src="{{tracks}}"></audio>
{% endfor %}
{% endif %}
<button id="play">PLAY</button>
<button id="stop">STOP</button>
<button id="next">NEXT</button>
jQuery的
<script>
jQuery(document).ready(function(){
var audioArray = document.getElementsByClassName('playsong');
var nowPlaying = audioArray[i=0];
nowPlaying.load();
$('#play').click(function() {
nowPlaying.play();
})
$('#stop').click(function() {
nowPlaying.pause();
})
$('#next').click(function() {
$.each($('audio.playsong'), function() {
this.pause();
});
i++;
nowPlaying.load();
nowPlaying.play();
})
})
</script>
tracksurl是一个列表,当前保存了一个以上的音频,播放按钮可以播放第一个音轨,但是当点击下一个时,它仍然只播放第一个音轨
代码的问题是nowPlaying
的值被初始化,但它永远不会真正更新(索引i
被更新,但不是nowPlaying
的实际值),因此它将始终是同一首歌曲(第一首)。
所以只需在i++
行之后添加:
nowPlaying = audioArray[i];
现在,代码还有另一个问题: i
的值正在增加而不检查它是否超过音频数组的长度。 这意味着玩家在尝试访问长度+ 1项时会中断。
要解决此问题,请使用模块操作更新i
的值,并考虑数组的长度:
i = ++i % audioArray.length;
所以一旦修复完毕,代码看起来就像这样并且工作正常(来自MDN和W3Schools的演示音频文件):
jQuery(document).ready(function(){ var audioArray = document.getElementsByClassName('playsong'); var nowPlaying = audioArray[i=0]; nowPlaying.load(); $('#play').click(function() { nowPlaying.play(); }) $('#stop').click(function() { nowPlaying.pause(); }) $('#next').click(function() { $.each($('audio.playsong'), function() { this.pause(); }); i = ++i % audioArray.length; nowPlaying = audioArray[i]; nowPlaying.load(); nowPlaying.play(); }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <audio class="playsong" src="http://www.w3schools.com/html/horse.mp3"></audio> <audio class="playsong" src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"></audio> <button id="play">PLAY</button> <button id="stop">STOP</button> <button id="next">NEXT</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.