在表中追加文本，同时保留现有数据

Question

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

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

我的声音管理器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>');

它在现有值的基础上写入一个新值，最终在页面上滚动，而不是简单地用新值替换现有数据。

有什么想法吗？我对开发还很陌生，已经坚持了大约两天了。

谢谢。

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选择器#time，因此在前进的过程中，您会遇到页面中ID重复的问题。还要研究$.data（），以便在渲染时将初始值存储到元素的属性中，然后您可以访问这些属性，而不是从文本内容中提取。

Answer 2

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

您可以在元素中创建一个跨度，并使用$.html（）来替换持续时间的值。

<td id="time">10:05 <span id="duration"></span></td>
<script>
  whileplaying: function() {
   ...
   $('#duration').html(duration);
  }
</script>