javascript - 如何将 Json 中的视频及其描述附加到 JavaScript 中的 DOM 元素？

Question

我有一个简单的侧边栏，我想显示来自 json 的多个视频，目前，我只想显示来自 json 的标题和视频，如下所示。

这是我到目前为止所拥有的。

<ul class="sidebar"> 
  <li>
  <h1 class="title"></h1>
  <video id="video_list" src=""></video>
  </li>
</ul>

这里是 JavaScript

$(function() {
    var movies = [{
            "title": "travel",
            "left": 201,
            "top": 209,
            "movieid": "10",
            "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
            "buttons": [{
                "left": 81,
                "top": 51,
                "start_time": 1,
                "end_time": 2,
                "buttonid": "10_1",
                "btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
            }]
        },
        {
            "title": "ecommerce",
            "movieid": "20",
            "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
            "buttons": [{
                "left": 0,
                "top": 0,
                "start_time": 1,
                "end_time": 2,
                "width": '200',
                "height": '60',
                "buttonid": "20_1",
            }]
        },

    ];


    function getVideoList() {
        var title = $('.title');
        var videoID = $('.video_list');
        $.each(movies, function(index, dataValue) {
            var movie_title = $("h1", {
                value: dataValue.movieid
            }).html(dataValue.title).appendTo(title);

            var movie_video = $("#video_list", {

            }).html(dataValue.movie_url).appendTo(videoID);
        });

    }

    getVideoList();


});

这是 jsfiffle:live demo我能够显示每部电影的视频标题，但我很难显示标题和相应的视频，如 json :(

我应该改变什么才能得到我想要的？？？

Answer 1

您的循环没有定义每个元素。如果您想要<li>对于每个标题和视频，您需要做一些不同的事情。考虑创建一个为每个容器构建模板的函数。

工作示例:https://jsfiddle.net/Twisty/e2q4kd13/12/

HTML

<ul class="sidebar">
</ul>

JavaScript

$(function() {
  var movies = [{
      "title": "travel",
      "left": 201,
      "top": 209,
      "movieid": "10",
      "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
      "buttons": [{
        "left": 81,
        "top": 51,
        "start_time": 1,
        "end_time": 2,
        "buttonid": "10_1",
        "btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
      }]
    },
    {
      "title": "ecommerce",
      "movieid": "20",
      "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
      "buttons": [{
        "left": 0,
        "top": 0,
        "start_time": 1,
        "end_time": 2,
        "width": '200',
        "height": '60',
        "buttonid": "20_1",
      }]
    }
  ];

  function formatTitle(t) {
    var nt = t[0].toUpperCase();
    nt += t.slice(1);
    return nt;
  }

  function makeListItem(v, p) {
    var li = $("<li>");
    var title = $("<h1>", {
      class: "title",
      for: "video_" + v.movieid
    }).html(formatTitle(v.title)).appendTo(li);
    var vObj = $("<video>", {
      id: "video_" + v.movieid,
      src: v.movie_url
    }).appendTo(li);
    li.appendTo(p);
  }

  function getVideoList() {
    $.each(movies, function(index, dataValue) {
      makeListItem(dataValue, $(".sidebar"));
    });
  }

  getVideoList();
});

在您的脚本中，将迭代视频列表并将每个视频的数据发送到该函数。函数 thenb 创建一个新的 <li>对于每个视频。这将包含 <h1>标题元素和 <video>元素。然后将其全部附加到列表容器中。

生成的 HTML

<ul class="sidebar">
  <li>
    <h1 class="title" for="video_10">Travel</h1>
    <video id="video_10" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </li>
  <li>
    <h1 class="title" for="video_20">Ecommerce</h1>
    <video id="video_20" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
  </li>
</ul>

希望有帮助。