如何在问题列表中制作不同的视频答案？

Question

我需要制作必须包含问题和视频答案的弹出窗口。

对我而言，棘手的部分是如何让每个问题都显示不同的视频，但在同一个地方。此外，当用户第一次看到弹出窗口时，应该预定义第一个问题和视频。

以下是弹出窗口的基本方案：

Answer 1

将每个视频设置为display:none，然后在执行某些用户操作后使用jQuery显示所需的项目。在我的示例中，我使用了.click()

基本示例：

＆＃13;

＆＃13;

$(".options>li").click(function() {
  $(".view").css('display', 'none')
});

$("li.aaa").click(function() {
  $(".view.aaa").css('display', 'block')
});

$("li.bbb").click(function() {
  $(".view.bbb").css('display', 'block')
});

$("li.ccc").click(function() {
  $(".view.ccc").css('display', 'block')
});

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  width: 90vw;
  margin: 0 auto;
  align-items: center;
}

.panel {
  display: inline-block;
  width: 50%;
}

.view {
  max-width: 100%;
  display: none;
  border: 1px solid red;
}

.options>li {
  width: 100%;
  background: grey;
  list-style: none;
  margin: .25em auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">

  <div class="panel right">
    <ul class="options">
      <li class="aaa">aaa</li>
      <li class="bbb">bbb</li>
      <li class="ccc">ccc</li>
      <li class="ddd"></li>
      <li class="eee"></li>
    </ul>
  </div>


  <div class="panel left">
    <img src="http://fruitandvegetablesmelbourne.com.au/wp-content/uploads/2015/04/golden-delicious-apples.jpg" class="view aaa">
    <img src="http://img.aws.livestrongcdn.com/ls-article-image-400/cpi.studiod.com/www_livestrong_com/photos.demandstudios.com/56/251/fotolia_5712687_XS.jpg" class="view bbb">
    <img src="http://timesofindia.indiatimes.com/thumb/msid-49502853,width-400,resizemode-4/49502853.jpg" class="view ccc">
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;