Question

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

<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左边的时间已经在表格中了，我想在/.// p>之后附加新数据

我的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天。

感谢。

Answer 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时使用ID选择器#time，因此当你前进时，你会遇到页面重复ID的问题。同时调查$.data()以将初始值存储到渲染中的元素属性中，然后您可以访问该属性而不是撤出文本内容。

Answer 2

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

你可能会做的是在元素中创建一个span，并使用$ .html（）来替换持续时间的值。

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

<script>
  whileplaying: function() {
   ...
   $('#duration').html(duration);
  }
</script>

在保留现有数据的同时在表中附加文本

2 个答案: