javascript数组和对象嵌套innerHTML显示页面

最新推荐文章于 2022-10-09 10:23:20 发布

weixin_30552811

最新推荐文章于 2022-10-09 10:23:20 发布

阅读量413

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pjpdehome/p/9382445.html

版权

思路：

先搭HTML页面框架，写好CSS样式。将标签写上id，同类型标签构成一个数组，所以需要赋不同的id名。

遍历数组里每个对象，判断当前键是否等于我们要显示出来的标签，如果是就将其innerHTML出来。

全局代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<style>
*{margin:0;padding: 0;}
ul{list-style: none;}

div.wrap>ul{width:1300px;height: 200px;margin:100px auto;}
div.wrap>ul>li{width:230px;height:200px;float:left;text-align: center;margin-left: 20px;}
div.wrap>ul>li>h4{margin-bottom: 15px;}

</style>
<body>

<div class="wrap">
<ul>
<li>
<img src="" alt="" id="img1">
<h4 id="h1"></h4>
<p id="p1"></p>
</li>
<li>
<img src="" alt="" id="img2">
<h4 id="h2"></h4>
<p id="p2"></p>
</li>
<li>
<img src="" alt="" id="img3">
<h4 id="h3"></h4>
<p id="p3"></p>
</li>
<li>
<img src="" alt="" id="img4">
<h4 id="h4"></h4>
<p id="p4"></p>
</li>
<li>
<img src="" alt="" id="img5">
<h4 id="h5"></h4>
<p id="p5"></p>
</li>
</ul>
</div>

<script>
var arr = [
{
img:'images/1.png',
title:'代码模块化',
desc:'代码进行了完全模块化拆分,利于后期维护'
},
{
img:'images/2.png',
title:'超高拓展性',
desc:'采用接口模式,提供了丰富的类库包含常用的的方法。'
},
{
img:'images/3.png',
title:'丰富的插件',
desc:'包含20多种专门为编辑设计开发的插件,方便二次开发'
},
{
img:'images/4.png',
title:'超强的性能',
desc:'webpack打包压缩，压缩代码不足100KB,code少,功能强！'
},
{
img:'images/5.png',
title:'功能可定制',
desc:'基于layer的高拓展性,可轻松实现功能定制'
}

]

var img = [
document.getElementById('img1'),
document.getElementById('img2'),
document.getElementById('img3'),
document.getElementById('img4'),
document.getElementById('img5')
];
var h4 = [
document.getElementById('h1'),
document.getElementById('h2'),
document.getElementById('h3'),
document.getElementById('h4'),
document.getElementById('h5')
];
var p = [
document.getElementById('p1'),
document.getElementById('p2'),
document.getElementById('p3'),
document.getElementById('p4'),
document.getElementById('p5')
];

for(var i=0;i<arr.length;i++){
for(var key in arr[i]){
if(key == 'img'){
img[i].src = arr[i][key];
}else if(key == 'title'){
h4[i].innerHTML = arr[i][key];
}else if(key == 'desc'){
p[i].innerHTML = arr[i][key];
}
}
}

</script>
</body>
</html>

转载于:https://www.cnblogs.com/pjpdehome/p/9382445.html

weixin_30552811

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript数组和对象嵌套innerHTML显示页面

思路：先搭HTML页面框架，写好CSS样式。将标签写上id，同类型标签构成一个数组，所以需要赋不同的id名。遍历数组里每个对象，判断当前键是否等于我们要显示出来的标签，如果是就将其innerHTML出来。全局代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UT...
复制链接

扫一扫