JS动态生成界面中存在的问题!
2017-02-14 13:38
316 查看
公司在做一个 项目的时候需要JS动态生成html界面,类似于问卷调查的界面。可是怎么搭建才能更好呢?
一,把所有问题和选项一起直接加载到界面。类似于这样:
success: function(MyJson) { //回调函数,MyJson,返回值
var MyData = MyJson.d;
MyData = eval(MyData);
$.each(MyData, function(i, qsData) {
qst_problem += "<form class='mui-input-group'>";
qst_problem += "<div class='mui-card' id='qs'>";
qst_problem += "<h5 class='mui-content-padded'>";
//所有的问卷
qst_problem += qsData.QS_Title;;
qst_problem += "</h5>";
//问卷的题目
LoadChoice(qsData.QS_GUID);
for(var i = 0; i < choices.length; i++) {
qst_problem += "<div class='mui-input-row mui-radio mui-left'><label>";
//所有的abcd选项
qst_problem += choices[i];
qst_problem += "</label>";
//选项的guid和选项
qst_problem += "<input name='radio1' type='radio' title='" + mychoiceguid[i] + "' value='" + choices[i] + "'>";
qst_problem += "</div>";
}
qst_problem += "</div>";
qst_problem += "</form>";
但是这样存在一个问题,动态生成所有的我要点击的选项的id不能获取,就不能绑定监听事件。导致的问题是不能我选择的选项的数据提交上去;<input type='radio'>
也不能动态添加checked属性;
第二种方法:
先加载一个题目和一组选项,然后循环嵌套,动态ID绑定事件。
var MyData = MyJson.d;
MyData = eval(MyData);
$.each(MyData, function(i, qsData) {
var id = "qs_" + index;
var qst_problem = "";
qst_problem+="<form class='mui-input-group'>";
qst_problem += "<div class='mui-card' id='" + id + "'>";
qst_problem += "<h5 class='mui-content-padded'>";
qst_problem += qsData.QS_Title;
qst_problem += "</h5>";
qst_problem += "</div>";
qst_problem +="</form>";
$("#qst_problem").append(qst_problem);
LoadChoice(qsData.QS_GUID);
for(var j=0;j<choices.length;j++)
{
var qst_id = id + "_" + ( j + 1 );
var qst_select = "<div id='" + qst_id + "' class='mui-input-row mui-radio mui-left'><label>";
qst_select+= choices[j];
qst_select+="</label>";
qst_select+="<input name='radio" + index + "' type='radio' title='"+mychoiceguid[j]+"' value='"+choices[j]+"'>";
qst_select +="</div>";
$("#"+id).append(qst_select);
document.getElementById(qst_id).addEventListener("tap",function(){
$("#"+ id +" input").removeAttr("checked");
$(this).find('input:eq(0)').attr("checked","checked");
})
}
});
},
虽然只是一个小问题,但是每个小问题总结起来就不是小问题,
每天进步一点点!!!
一,把所有问题和选项一起直接加载到界面。类似于这样:
success: function(MyJson) { //回调函数,MyJson,返回值
var MyData = MyJson.d;
MyData = eval(MyData);
$.each(MyData, function(i, qsData) {
qst_problem += "<form class='mui-input-group'>";
qst_problem += "<div class='mui-card' id='qs'>";
qst_problem += "<h5 class='mui-content-padded'>";
//所有的问卷
qst_problem += qsData.QS_Title;;
qst_problem += "</h5>";
//问卷的题目
LoadChoice(qsData.QS_GUID);
for(var i = 0; i < choices.length; i++) {
qst_problem += "<div class='mui-input-row mui-radio mui-left'><label>";
//所有的abcd选项
qst_problem += choices[i];
qst_problem += "</label>";
//选项的guid和选项
qst_problem += "<input name='radio1' type='radio' title='" + mychoiceguid[i] + "' value='" + choices[i] + "'>";
qst_problem += "</div>";
}
qst_problem += "</div>";
qst_problem += "</form>";
但是这样存在一个问题,动态生成所有的我要点击的选项的id不能获取,就不能绑定监听事件。导致的问题是不能我选择的选项的数据提交上去;<input type='radio'>
也不能动态添加checked属性;
第二种方法:
先加载一个题目和一组选项,然后循环嵌套,动态ID绑定事件。
var MyData = MyJson.d;
MyData = eval(MyData);
$.each(MyData, function(i, qsData) {
var id = "qs_" + index;
var qst_problem = "";
qst_problem+="<form class='mui-input-group'>";
qst_problem += "<div class='mui-card' id='" + id + "'>";
qst_problem += "<h5 class='mui-content-padded'>";
qst_problem += qsData.QS_Title;
qst_problem += "</h5>";
qst_problem += "</div>";
qst_problem +="</form>";
$("#qst_problem").append(qst_problem);
LoadChoice(qsData.QS_GUID);
for(var j=0;j<choices.length;j++)
{
var qst_id = id + "_" + ( j + 1 );
var qst_select = "<div id='" + qst_id + "' class='mui-input-row mui-radio mui-left'><label>";
qst_select+= choices[j];
qst_select+="</label>";
qst_select+="<input name='radio" + index + "' type='radio' title='"+mychoiceguid[j]+"' value='"+choices[j]+"'>";
qst_select +="</div>";
$("#"+id).append(qst_select);
document.getElementById(qst_id).addEventListener("tap",function(){
$("#"+ id +" input").removeAttr("checked");
$(this).find('input:eq(0)').attr("checked","checked");
})
}
});
},
虽然只是一个小问题,但是每个小问题总结起来就不是小问题,
每天进步一点点!!!
相关文章推荐
- js动态生成表格时 colspan的问题
- JS继承机制的深入理解--动态原型存在的问题与解决
- js动态生成input指定My97DatePicker时间问题
- js 动态生成HTML,并加载事件遇到的问题
- JS根据动态生成的字符串,验证是否存在对应function并执行
- 程序运行时动态生成缓存时存在的问题
- Ext界面做图片动态加载的图片放大镜效果并解决JS内存泄漏问题
- 关于js中文乱码问题和js事件代理动态生成div
- js中的事件委托机制(解决动态生成的dom元素无法绑定事件的问题)
- js动态生成的DOM绑定事件失效的问题
- 关于 js 动态生成html 绑定事件失效的问题
- 意外解决js动态生成的html代码中一些事件失效问题
- 意外解决js动态生成的html代码中一些事件失效问题
- js做拼图游戏存在随机生成的图形,有时不可还原的问题
- 如何通过动态生成Html灵活实现DataGrid分类统计的界面显示功能
- 解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
- [问题-unfinished],怎样使动态改变的js里的document.write任意时间都可以显示在页面上, 问题是不在appendChild前面加一个alert() , append上去的js中的document.write语句通通无效
- 动态树的生成 js
- 关于ASP.NET中动态生成控件问题,急求解决!
- 动态生成页面返回数据的问题--十万火急!