javascript - 单击后允许按钮数组加载音频元素？

Question

所以我有一个部分显示所有上传的播客。如果我只有一个播客，则当前的 jQuery 可以工作，但是当加载多个播客时，我无法将事件委派给额外的音频文件（可以是 1 到 20 个）。

我可以在下面的行中放置什么作为索引来说明音频元素的动态数量？

$('#audio-player')[0].play();

这是在单击时加载音频文件的代码：

$( document ).ready(function() {
    $('#play-now-audio-btn').click(function(){
        console.log('hiii');
        $('#audio-player').show('fast',function(){
            $('#play-now-audio-btn').hide(function(){
                $('#audio-player')[0].play(); // Only playing the first audio file, but there are two!
            });
        });
    });
});

你如何推荐我.play()动态点击的额外音频文件？

标签： javascriptjquery

Answer 1

替换$('#audio-player')[0].play()为$(this).parent().find('#audio-player')[0].play()

您必须参考$(this)，以便它会找到#audio-player与单击的元素相关的内容。

此外 Replace $('#play-now-audio-btn')with $('.listen-bitton')asID选择器可能只选择一个元素，并且您希望将click事件绑定到所有按钮上。

您的最终代码将如下所示：

$('.listen-bitton').click(function(){
  let $playNow = $(this);
  $(this).parent().find('audio').show('fast',function(){
      let $audio = $(this);
      $playNow.hide(function(){
          $audio[0].play()
      });
  });
});

代码解释：

首先，我click使用选择器将事件绑定到所有按钮.listen-bitton，然后，为了找到相关audio标签，我指的是单击按钮的父级，并找到它的audio子级。

最后，我$playNow使用刚开始创建的引用来隐藏按钮。