点击按钮时允许加载音频元素的按钮数组？

Question

点击按钮时允许加载音频元素的按钮数组？

3

所以我有一个部分展示所有上传的播客。如果我只有一个播客，当前的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()

- HelloWorld

没错，但是我需要在 click() 方法中添加什么才能针对动态数量的音频元素进行定位？使用 [0] 索引来定位第一个元素在有两个元素时不起作用。 - HelloWorld

@Liad：HTML非常混乱，是WordPress动态生成的内容。但基本上每一集都被放在自己的容器中。 - HelloWorld

您可以在此处查看实时演示：https://themxstudio.com/podcasts/the-cmo-suite-ocast-hosted-by-sean-halter/ - HelloWorld

没问题，兄弟。我把它作为答案发布了，因为它解决了你的问题。 - Liad Yogev

我对你问题中的“extra”一词感到困惑，应该是如何播放我点击的当前音频。 - DEEPAK

显示剩余10条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Liad Yogev · Accepted Answer

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

你需要引用 $(this)，这样它就会找到与被点击元素相关的 #audio-player。

同时，将 $('#play-now-audio-btn') 替换为 $('.listen-bitton')，因为 ID 选择器只能选择单个元素，而你想在所有按钮上绑定 click 事件。

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

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

代码解释：

首先，我使用 .listen-button 选择器将 click 事件绑定到所有按钮上，然后，为了找到相关的 audio 标签，我引用了点击按钮的父元素，并找到它的 audio 子元素。

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