Мой Javascript работает только с одним элементом в python, встроенном для цикла в Django2

user3152311 спросил: 12 мая 2018 в 04:20 в: javascript

Я повторяю эти шаблоны шаблонов html, используя цикл Python for, и у меня есть javascript, чтобы пойти с ним. Проблема в том, что javascript работает только с первым элементом (сценарий в основном получает искомое положение аудио), а не остальное. Я думал, что это потому, что я установил идентификатор шаблона вместо имени класса, но все равно получаю те же результаты. 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 %}

1 ответ

kunambi ответил: 12 мая 2018 в 04:39
  1. JavaScript не должен находиться в цикле.
  2. В вашем цикле вы не создаете уникальные идентификаторы для ваших аудио-элементов. Легкий способ сделать это можно сделать с помощью {{ forloop.counter }} в атрибуте класса (или любого другого) вашего звукового тега, а затем вызвать его в вашем JavaScript.

Пожалуйста, дайте мне знать, если вам нужна дополнительная помощь.