我的Javascript只在Django2中嵌入for循环的python中的一个元素上工作

我正在使用PythonforLoop迭代这些html模板卡，并附带了一个javascript。问题是javascript只处理第一个元素（脚本基本上获取音频的搜索位置），而不是其余元素。我认为这是因为我设置了模板卡的id而不是类名，但我仍然得到了相同的结果。Javascript在for循环中。也许不应该？无论如何，这是我的代码：

{% for song in songs %}
            <div class="col-md-4">
                <div class="card mb-4 box-shadow">
                    <img class="card-img-top" id="img_size"
                         src="{{ song.song_image.url }}"
                         alt="Card image cap">
                    <div class="my-header">
                        <h3 id="song_title">{{ song.song_title }}</h3>
                        <span id="pub_date">{{ song.publishing_date }}</span>
                    </div>
                    <div style="clear:both"></div>
                    <hr />
                    <div class="card-body">
                        <p class="card-text">{{ song.song_description }}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <audio class="myAudio" controls>
                                    <source src="{{ song.song_file.url }}" type="audio/mpeg">
                                    <source src="{{ song.song_file.url }}" type="audio/wav">
                                    Your browser does not support the audio element.
                                </audio>
                                <script>
                                    var vid = document.getElementsByClassName("myAudio");

                                    function getCurTime() {
                                        alert(vid.currentTime);
                                    }

                                    function setCurTime() {
                                        vid.currentTime=5;
                                    }
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}

{%用于歌曲中的歌曲%}
{{song.song_title}
{{song.publishing_date}

{{song.song\u description}
您的浏览器不支持音频元素。
var vid=document.getElementsByClassName（“myAudio”）；
函数getCurTime（）{
警报（见当前时间）；
}
函数setCurTime（）{
vid.currentTime=5；
}
{%endfor%}

不，JavaScript不应该在循环中

在循环中，您没有为音频元素创建唯一标识符。一种简单的方法是在音频标记的class（或任何其他）属性中使用

{{forloop.counter}}

，然后在JavaScript中调用它

---

如果需要更多帮助，请告诉我。

为什么要将脚本放入循环中？