Question

我想为页面上的每个音频文件添加一个播放按钮。因此，我在每个音频标签下添加了一个带索引类名的按钮，但现在我不知道如何继续并将click事件绑定到按钮。也许总的来说有更优雅的方法......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<audio id="myaudio" src="http://www.soundjay.com//mechanical/gun-cocking-01.mp3">
</audio>

<audio id="myaudio" src="http://www.soundjay.com//mechanical/gun-cocking-02.mp3">
</audio>

$( "audio" ).each(function( index ) {
   $( '<button class=audioButton"' + index + '">Play Clip #' + index + '</button>' ).insertAfter( this );
});

$("button").on("click", playTest);

Answer 1

如果按钮是动态创建的，您必须委托您要在其上执行的任何事件。

希望此代码段有用

$( "audio" ).each(function( index ) {
   $( '<button class="audioButton' + index + '">Play Clip #' + index + '</button>' ).insertAfter(this );
});

$("body").on("click","button" ,playTest);
function playTest(){
 alert($(this).prop('class'))

}

JSFIDDLE

Answer 2

我注意到你使用了多个具有相同值的ID（永远不会工作），所以我删除了它们。我使用之前的海报代码来创建按钮，但已经详细说明了如何在playTest函数中调用每个音频。希望这有帮助！

＆＃13;

$("audio").each(function(index) {
  $(this).attr('id','myaudio' + index);
  $('<button id="audio' + index + '">Play Clip #' + index + '</button>').insertAfter(this);
});

$("body").on("click", "button", playTest);

function playTest() {
  var audid = 'my'+ $(this).attr('id');
  playAudio(audid);
}

function playAudio(str) {
  var currAudio = document.getElementById(str);
  if (currAudio.paused) {
    currAudio.play();
  } else {
    currAudio.pause();
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<audio src="http://www.soundjay.com//mechanical/gun-cocking-01.mp3">
</audio>

<audio src="http://www.rachelgallen.com/monkey.mp3">
</audio>

＆＃13;

为页面上的所有音频标签添加播放按钮

2 个答案: