时间戳

首页 > 解决方案 > 我的 Javascript 仅适用于 Django2 中嵌入 for 循环的 python 中的一个元素

javascript - 我的 Javascript 仅适用于 Django2 中嵌入 for 循环的 python 中的一个元素

问题描述

我正在使用 Python for 循环迭代这些 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 %}

标签： javascriptpythonhtmldjangoaudio

解决方案

  1. 不，JavaScript 不应该在循环中。
  2. 在您的循环中，您不会为音频元素创建唯一标识符。一个简单的方法是{{ forloop.counter }}在你的音频标签的类（或任何其他）属性中使用，然后在你的 JavaScript 中调用它。

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

推荐阅读