我创建了2个用于创建DOM元素的函数。第一种方法构建单个元素节点,根据属性/值对数组插入属性,插入文本节点并将元素放入父元素中。除了第二个函数调用它之外,这个函数可以正常工作。
第二个函数调用第一个函数来生成具有相同类型和父元素但具有不同文本和属性的多个元素(用于生成诸如li、option或p元素之类的元素)。该函数的参数是要重复创建的元素的类型、要添加的父元素、包含属性值对的数组的数组,以及用于文本节点的字符串数组(数组的数组和字符串的数组必须具有相同的长度)。创建的元素数量取决于属性数组的数量。
问题是,当第二个函数调用第一个函数时,它似乎挂起了浏览器。
非常感谢您的帮助和建议。
我一直在运行的代码:
function buildElement(type, txt, attr, parent){
element = document.createElement(type);
if(typeof attr != 'undefined' && attr){
for(i=0; i<attr.length; i=i+2){
element.setAttribute(attr[i], attr[i+1]);
}
}
if(typeof txt != 'undefined' && txt){
element.appendChild(document.createTextNode(txt));
}
if(typeof parent != 'undefined' && parent){
parent.appendChild(element);
}
return element;
}
function multiElements(type, parent, attrs, txts){
for(i=0; i<attrs.length; i++){
buildElement(type,txts[i],attrs[i],parent);
}
}
var x=1;
var local = buildElement('select','','name','local'+x,'onchange',
'selectPhUpdate(this.value)'],newCard);
multiElements('option',
local,
[
['value','auck'],
['value','chch'],
['value','dun'],
['value','ham'],
['value','mor'],
['value','nap'],
['value','nply'],
['value','wel']
],
['Auckland','Christchurch','Dunedin','Hamilton','Morrinsville',
'Napier','New Plymouth','Wellington']
);
首先,你的代码中缺少一个[
,
var local = buildElement('select','','name','local'+x,'onchange',
'selectPhUpdate(this.value)'],newCard);
应该var local = buildElement('select','',['name','local'+x,'onchange',
'selectPhUpdate(this.value)'],newCard);
至于问题本身:您正在为所有内容使用全局变量,甚至对于循环计数器—并且您两次都使用了i
作为循环计数器。
有两个条目的二级attrs
数组,你从multiElements
buildElement
,所以i
总是的值为2
当遍历当前2级阵列buildElement
完成——这意味着,在multiElements
从未停止循环,因为2
总是比attrs.length
较小(8
)…所以第三个选项"达尼丁"创建一遍又一遍,一遍…,…。
只要在两个循环中使用for(var i=0; …
,从而使每个i
在各自的函数范围内成为本地变量,它就会按预期工作。
(buildElement
中的element
也应该是本地的)
看看它在这个小提琴中的小修复工作:http://jsfiddle.net/c7Pq3/1/