gpt4 book ai didi

javascript - 如何循环遍历javascript对象并在html中显示值

转载 作者:太空宇宙 更新时间:2023-11-03 21:29:26 25 4
gpt4 key购买 nike

我是 javascript 的新手,我需要这方面的帮助。我想以下面的格式将许多视频存储在一个 js 文件中。

这是 videos.js 文件

<script>       
videos {
monthly {
january
{
240 : 'linktojanuary240.mp4',
360 : 'linktojanuary360.mp4',
480 : 'linktojanuary480.mp4',
720 : 'linktojanuary720.mp4'
},

february
{
240 : 'linktofebruary240.mp4',
360 : 'linktofebruary360.mp4',
480 : 'linktofebruary480.mp4',
720 : 'linktofebruary720.mp4'
}
};


family {
children
{
240 : 'linktochildren240.mp4',
360 : 'linktochildren360.mp4',
480 : 'linktochildren480.mp4',
720 : 'linktochildren720.mp4'
},
parent
{
240 : 'linktoparent240.mp4',
360 : 'linktoparent360.mp4',
480 : 'linktoparent480.mp4',
720 : 'linktoparent720.mp4'

}
};


};

</script>

**这是index.html文件**

<html>

<head>
</head>

<body>
<h3> Monthly </h3>
<h1>january</h1>
<a href="linktojanuary240p.mp4" data-role="button" data-inline="true" data-mini="true">240p </a>
<a href='linktojanuary360p.mp4' data-role="button" data-inline="true" data-mini="true">360p </a>
<a href='linktojanuary480p.mp4' data-role="button" data-inline="true" data-mini="true">480p </a>
<a href='linktojanuary720p.mp4' data-role="button" data-inline="true" data-mini="true">720p </a>

<h1>february</h1>
<a href="linktofebruary240p.mp4" data-role="button" data-inline="true" data-mini="true">240p </a>
<a href='linktofebruary360p.mp4' data-role="button" data-inline="true" data-mini="true">360p </a>
<a href='linktofebruary480p.mp4' data-role="button" data-inline="true" data-mini="true">480p </a>
<a href='linktofebruary720p.mp4' data-role="button" data-inline="true" data-mini="true">720p </a>



<h3> family </h3>
<h1>children</h1>
<a href="linktochildren240p.mp4" data-role="button" data-inline="true" data-mini="true">240p </a>
<a href='linktochildren360p.mp4' data-role="button" data-inline="true" data-mini="true">360p </a>
<a href='linktochildren480p.mp4' data-role="button" data-inline="true" data-mini="true">480p </a>
<a href='linktochildren720p.mp4' data-role="button" data-inline="true" data-mini="true">720p </a>

<h1>parent</h1>
<a href="linktoparent240p.mp4" data-role="button" data-inline="true" data-mini="true">240p </a>
<a href='linktoparent360p.mp4' data-role="button" data-inline="true" data-mini="true">360p </a>
<a href='linktoparent480p.mp4' data-role="button" data-inline="true" data-mini="true">480p </a>
<a href='linktoparent720p.mp4' data-role="button" data-inline="true" data-mini="true">720p </a>

</body>

我目前手动更新 html,但这需要太多时间并且文件变得更大。我只想更新 videos.js 文件中的新视频,并自动生成 html 并设置样式。

如果您有更好的方法,请告诉我。否则,请提供帮助。谢谢。

最佳答案

查看下面的链接。我已经使用多个循环生成了您的整个代码。有一个图书馆:jQuery .它用于使代码更短。

Demo

这是创建数组和对象的方式:

var videos = {
monthly: {
january: {
240: 'linktojanuary240.mp4',
360: 'linktojanuary360.mp4',
480: 'linktojanuary480.mp4',
720: 'linktojanuary720.mp4'
},
february: {
240: 'linktofebruary240.mp4',
360: 'linktofebruary360.mp4',
480: 'linktofebruary480.mp4',
720: 'linktofebruary720.mp4'
}
},
family: {
children: {
240: 'linktochildren240.mp4',
360: 'linktochildren360.mp4',
480: 'linktochildren480.mp4',
720: 'linktochildren720.mp4'
},
parent: {
240: 'linktoparent240.mp4',
360: 'linktoparent360.mp4',
480: 'linktoparent480.mp4',
720: 'linktoparent720.mp4'
}
}
}

然后遍历它:

$.each(videos, function(key, value) {
html += "<h3>"+key+"</h3>";
$.each(value, function(month, file) {
html += "<h1>"+month+"</h1>";
$.each(file, function(size, name) {
html += '<a href="'+name+'" data-role="button" data-inline="true" data-mini="true">'+size+' </a>';
});
});
});

关于javascript - 如何循环遍历javascript对象并在html中显示值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30539290/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com