Question

我正在寻找一种在html css javascript中创建动态剧集列表的方法，该列表了解用户所在的剧集并添加＆＃34; active＆＃34; class列表中的li元素。

让我告诉你一个例子： what i want

谢谢你：）

Answer 1

这可能会有所帮助。视频结束时调用方法changeEpisode。

＆＃13;

document.getElementById("video").addEventListener("ended", changeEpisode, false);
function changeEpisode()
{
    var elem = $("#episode_list li.active");
    $(elem).removeClass("active");
    $(elem).next().addClass("active");
    $("#video").attr("src",$(elem).next().data("src"));
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<video height="200px" width="200px" controls autoplay src="https://www.w3schools.com/tags/movie.mp4" id="video"></video>
<ul class="list-group" id="episode_list">
  <li class="list-group-item active" data-src="https://www.w3schools.com/tags/movie.mp4">Episode 1</li>
  <li class="list-group-item" data-src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4">Episode 2</li>
  <li class="list-group-item" data-src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4">Episode 3</li>
</ul>

＆＃13;

如何在网站上创建动态列表

1 个答案: