我正在使用Safalra's javascript创建一个可折叠列表。该脚本可以在多种浏览器上运行，没有任何问题。但是，当我将 javascript 应用到我自己的列表时，当我使用 IE 时，它无法按预期运行(我目前使用的是 7)。它只是编写列表，没有展开和收缩图像。
我精确地复制了 Safalra 的 javascript，所以我认为错误一定在我自己的列表中。这就是我生成列表的方式:
<body onLoad="makeCollapsible(document.getElementById('libguides'));">
<ul id="libguides">
<script type="text/javascript" src="http://api.libguides.com/api_subjects.php?iid=54&more=false&format=js&guides=true&break=li"></script>
</ul>
(是的，我最终确实关闭了 body 标记。)当我在 IE 中运行它时，它告诉我第 48 行导致了问题，这似乎是:
node.onclick=createToggleFunction(node,list);
这是整个函数:
function makeCollapsible(listElement){
// removed list item bullets and the sapce they occupy
listElement.style.listStyle='none';
listElement.style.marginLeft='0';
listElement.style.paddingLeft='0';
// loop over all child elements of the list
var child=listElement.firstChild;
while (child!=null){
// only process li elements (and not text elements)
if (child.nodeType==1){
// build a list of child ol and ul elements and hide them
var list=new Array();
var grandchild=child.firstChild;
while (grandchild!=null){
if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){
grandchild.style.display='none';
list.push(grandchild);
}
grandchild=grandchild.nextSibling;
}
// add toggle buttons
var node=document.createElement('img');
node.setAttribute('src',CLOSED_IMAGE);
node.setAttribute('class','collapsibleClosed');
node.onclick=createToggleFunction(node,list);
child.insertBefore(node,child.firstChild);
}
我承认我是一个 javascript 新手，无法理解为什么该特定代码行会导致错误。我在这里查看了其他一些问题，想知道这是否可能是 setAttribute 的问题？
提前致谢。
编辑添加:
这是 createToggleFunction 函数的代码。整个脚本就是这两个函数(加上声明图像的变量)。
function createToggleFunction(toggleElement,sublistElements){
return function(){
// toggle status of toggle gadget
if (toggleElement.getAttribute('class')=='collapsibleClosed'){
toggleElement.setAttribute('class','collapsibleOpen');
toggleElement.setAttribute('src',OPEN_IMAGE);
}else{
toggleElement.setAttribute('class','collapsibleClosed');
toggleElement.setAttribute('src',CLOSED_IMAGE);
}
// toggle display of sublists
for (var i=0;i<sublistElements.length;i++){
sublistElements[i].style.display=
(sublistElements[i].style.display=='block')?'none':'block';
}
}
}
编辑添加(再次):
根据 David 的建议，我更改了 setAttribute 和 getAttribute 的所有实例...但显然我做错了什么。 IE 在第一行(这只是 doctype 声明)和第 49 行处中断，这是之前中断的同一行代码:
node.onclick=createToggleFunction(node,list);
这是现在编写的第一个函数:
function makeCollapsible(listElement){
// removed list item bullets and the sapce they occupy
listElement.style.listStyle='none';
listElement.style.marginLeft='0';
listElement.style.paddingLeft='0';
// loop over all child elements of the list
var child=listElement.firstChild;
while (child!=null){
// only process li elements (and not text elements)
if (child.nodeType==1){
// build a list of child ol and ul elements and hide them
var list=new Array();
var grandchild=child.firstChild;
while (grandchild!=null){
if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){
grandchild.style.display='none';
list.push(grandchild);
}
grandchild=grandchild.nextSibling;
}
// add toggle buttons
var node=document.createElement('img');
node.src = CLOSED_IMAGE;
node.className = 'collapsibleClosed';
node.onclick=createToggleFunction(node,list);
child.insertBefore(node,child.firstChild);
}
child=child.nextSibling;
}
}
这是第二个函数:
function createToggleFunction(toggleElement,sublistElements){
return function(){
// toggle status of toggle gadget
// Use foo.className = 'bar'; instead of foo.setAttribute('class', 'bar');
if (toggleElement.className == 'collapsibleClosed') {
toggleElement.className = 'collapsibleOpen';
toggleElement.src = OPEN_IMAGE;
} else {
toggleElement.className = 'collapsibleClosed';
toggleElement.src = CLOSED_IMAGE;
}
// toggle display of sublists
for (var i=0;i<sublistElements.length;i++){
sublistElements[i].style.display=
(sublistElements[i].style.display=='block')?'none':'block';
}
}
}
最佳答案
Internet Explorer(版本 8 之前，仅在最佳标准模式下)的 setAttribute 和 getAttribute 实现非常糟糕。
它实际上看起来像这样:
function setAttribute(attribute, value) {
this[attribute] = value;
function getAttribute(attribute, value) {
return this[attribute];
}
如果属性名称与属性名称匹配，并且属性采用字符串值，则效果很好。
类属性的情况并非如此，其中匹配的属性是 className。
使用foo.className = 'bar';代替foo.setAttribute('class', 'bar');
关于javascript - IE javascript 错误 - 可能与 setAttribute 有关？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1574327/