0

私は音楽ファイルを再生するアプリに取り組んでいます。アプリの一部には、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 左の時間は、テーブルは既にあり、/ の後に新しいデータを追加したいと考えています。

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 に答える