Question

我正在尝试将字幕与 HTML 中的视频标签同步，并且我正在使用 for 循环来迭代这个 JSON 对象：

var sub_info = [
    {"id": 10, "start": "3.920", "end": "6.840", "text": "subtitle text" },
    {"id": 11, "start": "7.500", "end": "10.820", "text": "sample sub text"},
]

这是我为此目的编写的 for 循环：

function myFunc() {
    for (var info of sub_info) {
        if( videoPlayer.currentTime >= info.start && videoPlayer.currentTime <= info.end ) {
            subtitles.innerHTML = info.text
        } else {
            subtitles.innerHTML = " "
        }
    }
}

当我只写如果它工作正常但问题是我不希望在没有对话的情况下显示任何字幕。当我添加 else 时，它只会返回 else。

我也在 for 循环之外尝试了 subtitles.innerHTML = " "，但仍然不起作用。

我做错了吗？

Answer 1

问题是您每次都在重新测试所有字幕，因此它只对最后一个字幕有效。

不是循环更新字幕，而是执行 .find 以获取活动字幕，如果有则更新。如果没有，则清除。

类似的东西

function myFunc() {
  const activeSubtitle = sub_info.find(
    (sub) =>
      parseFloat(sub.start) <= videoPlayer.currentTime &&
      parseFloat(sub.end) >= videoPlayer.currentTime
  );
  if (activeSubtitle) {
    subtitles.innerHTML = activeSubtitle.text;
  } else {
    subtitles.innerHTML = " ";
  }
}

Javascript If else语句只返回'else'

1 个答案: