javascript - 迭代 {{#each id}} 时动态访问 getElementId

Question

我收到一个返回指向录音语音邮件的 url 数组的响应，我想使用漂亮的播放按钮在 Handlebars 中的语音邮件前端 ui 上播放，并在播放时显示暂停，反之亦然，

我的问题是当我尝试设置播放按钮的样式时，我需要通过元素 ID 访问以更改动画，但是每次 {{#each}} 迭代到下一个对象时，它都会复制它们的元素 ID，并且当我应用此脚本来尝试设置暂停按钮的样式，我当然会遇到问题。

<script>
  function play() {
    var audio = document.getElementById('audio');
    if (audio.paused) {
      audio.play();
      $('#play').removeClass('fa-play-circle')
      $('#play').addClass('fa-pause-circle')
    }else{
      audio.pause();
      audio.currentTime = 0
      $('#play').addClass('fa-play-circle')
      $('#play').removeClass('fa-pause-circle')
    }
  }
</script>;

解决这个问题的最佳方法是什么？

代码如下:

 {{#each vm}}
    {{#each this}}

      <div class="container text-light bg-dark" style="border-width:3; border-style:solid; border-color:black; margin-bottom:5px;">

         <div class="bglight">
             Date: {{datecreated}} / Duration: {{RecordingDuration}} / From: {{From}} / 

            <audio src="{{RecordingUrl}}" id="audio"></audio>
            <i class="far fa-play-circle" id="play" onclick='play()'></i>

       </div>
  </div>
     {{/each}}
 {{/each}}

Answer 1

ID 必须是唯一的。使用类和不显眼的编码:

$(".play").on("click",function() {
  var audio = $(this).prev();
  if (audio.paused) { ... } 

});