Question

我在索引视图中使用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

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

1 个答案: