Question

我在网站上创建了一个音频播放器。

可以对正在播放的曲目进行基于时间的评论，并且我希望在曲目进度达到评论的时间戳时显示它们。

我的设置为ul，评论为li。默认情况下隐藏li。我已在li s的数据属性中添加了注释的时间戳。

示例：

<ul class="comments">
  <li data-timestamp="0">Check my page fans : http://www.facebook.com/ITBFLR</li>
  <li data-timestamp="185525">great sub!</li>
  <li data-timestamp="256931">@greenmono: Haha thank's dude</li>
  <li data-timestamp="497073">Wicked mix de ;)</li>
</ul>

曲目上可以有很多评论（100+）。我的播放器以毫秒为单位返回当前曲目进度。

我可以使用选择器匹配所有li的时间戳小于当前曲目的进度吗？

我知道有一些jQuery的自定义选择器插件（例如A better data selector for jQuery），但我想知道这是否会成为一个巨大的瓶颈（性能明智）。

所以：使用这个解决方案是明智的还是我做错了？

Answer 1

您始终可以选择onload并将数据保存在内部对象中。然后只需在需要时获取相关数据，而无需触摸/遍历DOM。

这样的事可能有用：

var data = [],
    i = 0;

$(function() {
    $('.comments').find('li').each(function() {
        data.push({
            ts: this.getAttribute('data-timestamp'),
            el: $(this).hide()
        });
    });
});

onProgress(function(timestamp) { // simulated callback from the player
    while( data[i].ts < timestamp ) {
        data[i++].el.show();
    }
});

如果我在哪里，我可能会反过来做;从服务器打印出JSON数据，然后使用JavaScript创建列表元素。除非你真的需要“没有js”的后备......

根据时间显示列表项

1 个答案: