Question

我正在尝试在我的页面上实现音乐播放器。我有一个表格，每行代表一首歌曲，第一个元素是一个按钮，其id是歌曲的网址。

        <tbody>
        {% for e in entries %}
            <tr>
                <td><button class="song btn" id="{{ e.url }}"><i class="icon-play-circle"></i></button></td>
                <td>{{ e.title }}</td>
                <td>{{ e.artist }}</td> 
                <td>{{ e.features }}</td>
                <td>{{ e.genre }}</td>
                <td><a href="/myapp/editsong/{{ e.id }}">Edit</a></td>
            </tr>
        {% endfor %}
        </tbody>

我正在尝试实现一些javascript，以便在单击按钮时将页面上的HTML5音频元素的src更改为：

$("button.song").on("click", function(event){
    if (audio.src != event.target.id)
    {
      audio.src = event.target.id;
      play.className = 'btn btn-success';
      pause.className = 'btn';
      audio.play();
  }
});

这个实现有点工作，但非常错误。有时单击按钮会将音频元素src更改为空白，我将不得不多次单击该按钮。

Answer 1

我真的不确定，但是你应该使用其他属性来存储你想要运行的歌曲的URL，如果我的记忆没有让我失望，那么字符的“范围”有什么限制允许id attr。

也许value属性没有这个限制。虽然我会使用更多“仅限字母数字”作为对象/数组的引用，然后使用它来获取值。

问候！ Gonzalo G.

Answer 2

使用javascript警报进行调试，检查参数event.target.id。单击按钮以查看每个音频的值。

if (audio.src != event.target.id)
...

越野车javascript按钮事件处理程序

2 个答案: