Question

我有一个Django应用程序，该应用程序基于模型在页面上生成多个音频元素（用于循环）。每个音频元素的id由相应对象的pk生成。

我正在使用jquery设置音频播放器的样式，当我单击一个播放器时，所有音频播放器都会播放。

我尝试使用$（'＃{{beat.pk}}'）通过ID在jquery中进行选择，但这不起作用。

以下是生成音频播放器的代码：

{% for beat in beats %}
    <div class="col-md-4">
        <div class="card mb-2 h-100">
            <img class="card-img-top" src="{% static beat.coverArt %}" alt="cover art for exclusive trap beats for sale">
            <div class="card-body">
                <h5 class="card-title">{{ beat.title }}</h5>
                <p class="card-text">{{ beat.description }}</p>
                <!-- AUDIO SOURCE HERE-->
                <audio id="{{ beat.pk }}">
                    <source src="{% static beat.mp3preview %}" type="audio/wav">                
                </audio>
                <!-- START CUSTOM AUDIO PLAYER DIV-->
                <div class="player">
                    <div class="btns">
                        <div class="iconfont play-pause icon-play"></div>
                    </div><!-- END BUTTONS DIV -->
                    <div class="progress">

                    </div>                    
                </div>
                <!--END CUSTOM AUDIO PLAYER DIV -->
                <a href="{% url 'beat_detail' beat.pk %}"
                   class="btn btn-primary">
                    Purchase Exclusive Rights
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

这是JavaScript：

$(
  function(){
  var aud = $('audio')[0];
  $('.play-pause').on('click', function(){
  if (aud.paused) {
    aud.play();
    $('.play-pause').removeClass('icon-play');
    $('.play-pause').addClass('icon-stop');
  }
  else {
    aud.pause();
    $('.play-pause').removeClass('icon-stop');
    $('.play-pause').addClass('icon-play');
  }

})
  aud.ontimeupdate = function(){
    $('.progress').css('width', aud.currentTime / aud.duration * 100 + '%')
  }
})

执行此操作的最佳方法是什么？每个卡都应具有自己的音频播放器。单击时，它应播放相应的音频。

在另一张卡中播放音频播放器时，任何正在播放的音频都应停止，并且所选的音频应播放。

当django生成ID（在这种情况下可以使用）时，如果我能弄清楚如何通过id选择音频播放器，就好了。然后，我可能需要添加代码来停止正在播放的所有其他音频。

更新：

即使当硬编码ID时，它也不再起作用。因此，JS中有些问题。我认为该代码旨在从一个播放器播放多个音频文件，因此我可能必须搜索新代码以适应我的使用并增强我的基础知识。如果有人能让我朝着正确的方向前进，我将不胜感激！

当Django动态生成ID时，如何按ID选择音频元素

0 个答案: