鱼C论坛

 找回密码
 立即注册
查看: 3021|回复: 4

[已解决]for循环创建几个div格式怎么写啊?

[复制链接]
发表于 2019-3-12 16:48:37 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
想用for循环创建几个DIV,js写的不对,有没有大神指导指导。怎么用一个for循环,输出多个图二的div
最佳答案
2019-3-21 09:46:07
<div id="shiPin"></div>
  
  <script >
    var tu = [
      {title:'aatitle',name: 'aname',hot: 'a120w',url: 'aurl',imgUrl: 'aimgUrl'},{title:'batitle',name: 'bname',hot: 'b120w',url: 'burl',imgUrl: 'bimgUrl'},{title:'catitle',name: 'cname',hot: 'c120w',url: 'curl',imgUrl: 'cimgUrl'}
    ];
    var shiPin = document.getElementById('shiPin');
    var Tu = '';
    for (var i = 0; i < tu.length; i++){
      Tu += '<div class="shiP"><a href="' + tu[i].url + '"><img src="'+ tu[i].imgUrl +'" class="bz" /></a><p class="title">' + tu[i].title + '</p><p class="userName">' + tu[i].name + '</p><p class="hot"><img src="../imgs/hot/jpg" id="hot"/>'+ tu[i].hot + '</p></div>';
    }
    shiPin.innerHTML = Tu;
   
  </script>

图1

图1

图1

图1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2019-3-12 17:08:52 | 显示全部楼层
还有一个问题忘记问了 ,图片跟文字怎么水平对齐呢,我的文字总是比文字低一点。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-21 09:45:33 | 显示全部楼层
F:\微信图片_20190321094410.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-21 09:46:07 | 显示全部楼层    本楼为最佳答案   
<div id="shiPin"></div>
  
  <script >
    var tu = [
      {title:'aatitle',name: 'aname',hot: 'a120w',url: 'aurl',imgUrl: 'aimgUrl'},{title:'batitle',name: 'bname',hot: 'b120w',url: 'burl',imgUrl: 'bimgUrl'},{title:'catitle',name: 'cname',hot: 'c120w',url: 'curl',imgUrl: 'cimgUrl'}
    ];
    var shiPin = document.getElementById('shiPin');
    var Tu = '';
    for (var i = 0; i < tu.length; i++){
      Tu += '<div class="shiP"><a href="' + tu[i].url + '"><img src="'+ tu[i].imgUrl +'" class="bz" /></a><p class="title">' + tu[i].title + '</p><p class="userName">' + tu[i].name + '</p><p class="hot"><img src="../imgs/hot/jpg" id="hot"/>'+ tu[i].hot + '</p></div>';
    }
    shiPin.innerHTML = Tu;
   
  </script>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-21 09:50:35 | 显示全部楼层
Css属性vertical-align可以对齐图片与文字。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-25 18:38

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表