0

我正在开发一个播放音乐文件的应用程序。该应用程序的一部分列出了可在轨道表中播放的曲目：

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Title</th>
      <th>Featured Artist</th>
      <th>Length</th>
      <th>Size</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <% album.tracks.each do |t| %>
  <tbody>
    <tr>
      <td><%= t.track_number.to_s.rjust(2, '0') %></td>
      <td><%= t.title %></td>
      <td><%= t.artists.map{ |a| [a][0].name }.join(", ") %></td>
      <td id="time"><%= "#{((t.length) / 60)}:""#{(t.length % 60).to_s.rjust(2, '0')}" %></td>
      <td><%= "#{t.size} MB" %></td>
      <td>
        <div class="btn-group btn-group-hover pull-left" data-id="<%= t.id%>" data-url="<%= t.track_path%>">
          <a class="btn btn-mini icon-play"></a>
          <a class="btn btn-mini icon-volume-up"></a>
          <a class="btn btn-mini icon-trash"></a>
        </div>
      </td>
      <td><%= rating_for t, "sound" %></td>
      <td></td>
    </tr>
  </tbody>
  <% end %>
</table>

当我单击播放按钮并开始播放曲目时，我想在曲目时间列中附加当前曲目时间数据，因此它看起来像这样： 4:34/00:10 我在左边的时间在哪里表已经，我想在 / 之后附加新数据。

我的 soundmanager javascript 代码如下所示：

 whileplaying: function() {
   var track_time = $('#time').html();
   var seconds = Math.round(this.position/1000);
   var r = seconds % 60;
   var m = Math.floor(seconds / 60);
   var duration = (m < 10 ? '0' + m : m) + ":" + (r < 10 ? '0' + r : r);
   $('#time').html('<p>' + duration + '</p>');

问题是这个当前代码完全替换了当前轨道时间值而不是附加它，如果我使用

$('#time').append('<p>' + duration + '</p>');

或者

$('#time').text('<p>' + duration + '</p>');

除了现有值之外，它还会写入一个新值，该值最终会在页面上滚动，而不是简单地用新值替换现有数据。

关于如何做到这一点的任何想法？我对开发非常陌生，现在已经坚持了大约 2 天。

谢谢。

4

2 回答 2

1

如果允许您调整模板：

在模板中添加一个跨度：

`<span class="duration"></span>`

使

`<td id="time"><%= "#{((t.length) / 60)}:""#{(t.length % 60).to_s.rjust(2, '0')}" %><span class="duration"></span></td>`

然后是目标：

`$('#time').find('.duration').html(newVal)`

然后，您可以简单地定位它，而不是更新整个#time 文本。

顺便说一句，您在看起来像重复表行的地方使用了 ID 选择器 #time，因此您在前进时会遇到页面中重复 ID 的问题。还要研究$.data()以在渲染时将初始值存储到元素的属性中，然后您可以访问这些属性，而不是从文本内容中提取出来。

于 2013-09-01T00:01:54.490 回答
0

每次调用 $.append() 时，它都会将新的持续时间附加到元素的末尾，从而产生您所看到的问题。当您调用 $.html() 时，它会将元素中的所有内容替换为您传递给它的持续时间。

您可能会在元素中创建一个跨度并使用 $.html() 替换持续时间的值。

<td id="time">10:05 <span id="duration"></span></td>

<script>
  whileplaying: function() {
   ...
   $('#duration').html(duration);
  }
</script>
于 2013-08-31T23:56:01.407 回答