Question

我有一个获取响应返回一个指向音频录制语音邮件的url数组，我想在我的语音邮件前面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) { ... } 

});

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

1 个答案: