只有頂部audio_tag按鈕播放

我開始與我的網站上的音頻;我的previously在我的一個視圖中實現了帶有字形按鈕的audio_tag。在另一種觀點中，我試圖列出所有的單詞對象，並且我想要有一個按鈕來播放每個關聯的音頻。截至目前，此功能僅適用於此視圖中列出的第一個單詞對象。如何讓按鈕在點擊視圖中的所有對象時播放聲音？只有頂部audio_tag按鈕播放

課程顯示視圖：

<div class ="col-xs-10 col-xs-offset-1"> 
    <h3>Vocabulary</h3> 
    <br> 
    <ul> 
    <% @lesson.words.each do |word| %> 
     <li> 
     <%= image_tag word.image_url(:thumb) if word.image? %> 

     <b><%= word.term %></b> 

     <%= audio_tag word.sound, class: "audio-play" %> 
     <button type="button" class="btn btn-default", id="audioButton"> 
      <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
     </button> 

     <i>(<%= word.reference %>)</i> 

     </li> 
     <br> 
    <% end %> 
    </ul> 
</div>

的application.js：

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require jquery 
//= require bootstrap-sprockets 
//= require jquery_ujs 
//= require_tree . 

jQuery(document).ready(function() { 
$("#audioButton").on("click", function() { 
     $(".audio-play")[0].currentTime = 0; 
     return $(".audio-play")[0].play(); 
     }); 
});

來源

2016-06-14 gonzalo2000

給每一個它自己的唯一ID。在html id中必須是唯一的。例如''＃audioButton1'''＃audioButton2「'etc ...或者，不要使用ids，使用類名例如'class =」btn btn-default audio-button「'then」$（「。audio-按鈕「）。on（」click「，function（）' –

解決了它，非常感謝。 – gonzalo2000

給每一個它自己的唯一ID。

在html id中必須是唯一的。例如「＃audioButton1」「＃audioButton2」等...或者，不要使用ID，請使用類名稱，例如class="btn btn-default audio-button"然後$(".audio-button").on("click", function()

來源

2016-06-14 01:44:36

只有頂部audio_tag按鈕播放

回答

相關問題