jquery处理jinja（Django）加载的html5元素时出现问题

Question

我正在尝试用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是一个列表，当前包含一个以上的音频url，“播放”按钮可以播放第一个音频曲目，但是单击“下一步”时，它仍然只播放第一个曲目

Answer 1

代码的问题是nowPlaying的值被初始化了，但是它从来没有被真正更新过（索引i被更新了，而不是nowPlaying的实际值），所以它总是同一首歌（第一首）。你知道吗

所以只要在i++行后面加上这个：

nowPlaying = audioArray[i];

现在，代码还有另一个问题：i的值正在增加，而没有检查它是否超过音频数组的长度。这意味着玩家将打破时，试图访问长度+1项目。你知道吗

要解决此问题，请使用模块操作更新i的值，同时考虑数组的长度：

i = ++i % audioArray.length;

因此，一旦所有这些都被修复，代码将看起来像这样并且工作良好（来自MDN和W3Schools的演示音频文件）：

； <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> ；

；