我收到一个返回指向录音语音邮件的 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}}
最佳答案
ID 必须是唯一的。使用类和不显眼的编码:
$(".play").on("click",function() {
var audio = $(this).prev();
if (audio.paused) { ... }
});
关于javascript - 迭代 {{#each id}} 时动态访问 getElementId,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48605707/