如何将视频及其描述从Json附加到javascript中的DOM元素? [英] How to append videos and its description from Json to DOM elements in javascript?
问题描述
我有一个简单的边栏,我想显示json中的多个视频,现在,我只想在下面显示json中的标题和视频.
I have a simple sidebar which I want to display multiple videos from json, for now, I want just to show title and video from json something like this below.
这是我到目前为止所拥有的.
Here is what I have so far.
<ul class="sidebar">
<li>
<h1 class="title"></h1>
<video id="video_list" src=""></video>
</li>
</ul>
这是JavaScript
Here is 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:实时演示 我能够显示每部电影的视频标题,但是我却很难像json中一样显示标题和相应的视频:(
Here is jsfiffle: live demo I am able to display video titles for each movie but I am struggling to display both title and corresponding video as in json :(
为了获得我想要的东西我应该改变什么?
What am I supposed to change to get what I want???
推荐答案
您的循环未定义每个元素.如果每个标题和视频都需要<li>
,则需要做一些不同的事情.考虑创建一个为每个容器构建模板的函数.
Your loop is not defining each element. If you want a <li>
for each title and video, you need to do something different. Consider making a function that builds the template for each container.
工作示例: 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();
});
在您的脚本中,将迭代视频列表,并将每个视频的数据发送到该函数.然后,函数b为每个视频创建一个新的<li>
.这将包含标题的<h1>
元素和<video>
元素.然后将其全部添加到列表容器.
In your script, the video list is iterated and data for each video is sent to the function. The Function thenb makes a new <li>
for each video. This will contain a <h1>
element for the title and a <video>
element. It is all then appended to the list container.
生成的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>
希望有帮助.
这篇关于如何将视频及其描述从Json附加到javascript中的DOM元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!