javascript - audio_tag 仅播放第一个列出的音频

Question

我正在索引 View 中使用audio_tag:我希望通过单击按钮即可访问每个单词对应的声音文件。截至目前，所有按钮都会播放与第一个列出的单词相对应的声音。我一直试图概括 this 的答案发布到这种情况，但我不知道如何在列出模型中的声音文件的上下文中概括效果。如何让按钮播放与每个特定项目相关的声音？

查看:

<ul>
  <% @lesson.words.each do |word| %>
    <li> 
      <%= image_tag word.image_url(:thumb) if word.image? %> &nbsp        
        <b><%= word.term %></b>

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

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

application.js:

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

Answer 1

在您的脚本中，$(".audio-play")[0] 将返回整个页面中的第一个音频标签，这就是为什么始终播放第一个列出的单词的音频。

按如下方式更新您的脚本

jQuery(document).ready(function() {
  $(".audio-button").on("click", function() {
    var audio = $(this).prev(".audio-play");

    audio.currentTime = 0;
    return audio.play();
  });
});

在更新的脚本中，将检索被单击按钮旁边的音频标签，并播放相应的声音。

运行sample code