Question

我使用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&amp;more=false&amp;format=js&amp;guides=true&amp;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＆amp;的所有实例。 getAttribute ...但显然我做错了什么。 IE正在第1行（这只是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';
    }

  }

}

Answer 1

Internet Explorer（直到版本8，然后仅在最佳标准模式下）具有非常破碎的setAttribute和getAttribute实现。

它实际上看起来像这样：

function setAttribute(attribute, value) {
    this[attribute] = value;

function getAttribute(attribute, value) {
    return this[attribute];
}

这很好 iif 属性名称与属性名称匹配，属性采用字符串值。

class属性不是这种情况，匹配属性是className。

使用foo.className = 'bar';代替foo.setAttribute('class', 'bar');

Answer 2

node.onclick=createToggleFunction(node,list);

这可能不是你想要的。 createToggleFunction会返回一个函数吗？如果没有，那么我打赌你的意思是：

node.onClick = function() { createToggleFunction(node, list); };

如果我的猜测正确，那么你拥有它的方式会将onClick事件处理程序设置为createToggleFunction的结果，而不是像它需要的那样。

IE javascript错误 - 可能与setAttribute有关？

2 个答案: