首页 新闻 搜索 专区 学院

利用JS自动加载数据,根据数据大小自动生成button与div,跪求大神指教

0
悬赏园豆:20 [已解决问题] 解决于 2016-10-31 14:49

上下框是一个div,实在是不知道怎么折腾了

Trust.Believe的主页 Trust.Believe | 初学一级 | 园豆:184
提问于:2016-10-28 11:19
< >
分享
最佳答案
0

哈哈,“还是不想写代码”这话有点意思。不过是很够道理。直接把data数据循环创建下结构就好了

 

收获园豆:20
张云山 | 小虾三级 |园豆:642 | 2016-10-28 14:08

大概懂道理 就是这代码不知道该怎么实现 

Trust.Believe | 园豆:184 (初学一级) | 2016-10-28 14:12

@Trust.Believe: 姑且信你一回,

案例如下:

<div class="box"></div>
<script>
var box = document.getElementsByClassName("box")[0];
var data = [
{id:"1",name:"按钮一(点我)",xuan:["我是按钮一的列表",1,2,3,4,5]},
{id:"2",name:"按钮二(点我)",xuan:["我是按钮二的列表",11,22,333,44,55]},
{id:"3",name:"按钮三(点我)",xuan:["我是按钮三的列表",111,222,333,444,555]},
{id:"4",name:"按钮四(点我)",xuan:["我是按钮四的列表",1111,2222,3333,4444,5555]},
];
data.forEach(function(e,i){
var button = document.createElement("button");
button.innerHTML = e.name;
button.id = e.id;
button.onclick = function(){
var listobj = document.getElementById("list"+this.id);
if(listobj.style.display == "none"){
listobj.style.display = "block";
}else{
listobj.style.display = "none";
}
}
var div = document.createElement("div");
div.id = "list"+ e.id;
div.style.display = "none";
for(var j in e.xuan){
var div2 = document.createElement("div");
div2.innerHTML = e.xuan[j];
div.appendChild(div2);
}
box.appendChild(button);
box.appendChild(div);
});
</script>

不知道是不是这样的效果?不管是不是那你也只能接受了,嘿嘿.......

张云山 | 园豆:642 (小虾三级) | 2016-10-28 14:34

@Trust.Believe: 建议你可以用jquery,写起来更简单。

张云山 | 园豆:642 (小虾三级) | 2016-10-28 14:35

@张云山: 谢谢啊 我先看看你给的例子 

Trust.Believe | 园豆:184 (初学一级) | 2016-10-28 15:00
其他回答(3)
0

百度:js创建dom

吴瑞祥 | 园豆:28851 (高人七级) | 2016-10-28 11:45

好的

支持(0) 反对(0) Trust.Believe | 园豆:184 (初学一级) | 2016-10-28 14:10
0

你是不会用js新建标签呢,还是不会写button的点击事件,还是不会获取data数据,还是不想写代码

授之以渔 | 园豆:1076 (小虾三级) | 2016-10-28 11:45

不会获取data数据

支持(0) 反对(0) Trust.Believe | 园豆:184 (初学一级) | 2016-10-28 14:10
0

$("button").click(function(){ $("p").append(" <b>Hello world!</b>"); });类似这样动态生成页面,给button和div加上class属性,之后绑定点击事件,hide()和show()显示和隐藏

[3] | 园豆:1172 (小虾三级) | 2016-10-28 11:50

谢谢啊  我再琢磨琢磨

支持(0) 反对(0) Trust.Believe | 园豆:184 (初学一级) | 2016-10-28 14:14
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册