如何用getElementsByClassName替换getElementById函数调用

Question

我想使用CMS（https://stackoverflow.com/a/1933623/1336540）调用getElementsByClassName函数来实现使列表可折叠的功能，目前只能使用getElementById编写函数 - http://acmeous.blogspot.com/2011/03/how-to-create-easy-collapsible-and.html

因为可以有多个具有相同类的HTML元素，所以CMS使用循环来查找和处理它们。我试图调整他的代码，但由于循环使用它超出了我的JS功能。

原始CMS函数调用：

function toggle_visibility(className) {
var elements = getElementsByClassName(document, className),
   n = elements.length;
for (var i = 0; i < n; i++) {
var e = elements[i];

if(e.style.display == 'block') {
   e.style.display = 'none';
 } else {
   e.style.display = 'block';
 }
}
}

如何转换此函数调用以将getElementById替换为CMSs getElementsByClassName？

if (window.addEventListener) {
   window.addEventListener("load", function()
   {makeCollapsible(document.getElementById('listCategories'), 1);}, false);
} else if (window.attachEvent) {
   window.attachEvent("onload", function()
   {makeCollapsible(document.getElementById('listCategories'), 1);});
} else {
   window.onload = function()
   {makeCollapsible(document.getElementById('listCategories'), 1);};
}

谢谢大家阅读本文并试图帮助我！

编辑：函数makeCollapsible：

function makeCollapsible(listElement,listState){
  if(listState!=null) defaultState=listState;

  // 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 show/hide them
      var list=new Array();
      var grandchild=child.firstChild;
      while (grandchild!=null){
        if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){
          if(defaultState==1) grandchild.style.display='block';
          else grandchild.style.display='none';
          list.push(grandchild);
        }
        grandchild=grandchild.nextSibling;
      }

      // add toggle buttons
      if(defaultState==1) {
          var node=document.createElement('img');
          node.setAttribute('src',expandedImage);
          node.setAttribute('class','collapsibleOpen');
          node.style.marginRight="5px";
          node.style.display = "inline";
          node.onclick=createToggleFunction(node,list);
          child.insertBefore(node,child.firstChild);
      } else {
          var node=document.createElement('img');
          node.setAttribute('src',collapsedImage);
          node.setAttribute('class','collapsibleClosed');
          node.style.marginRight="5px";
          node.style.display = "inline";
          node.onclick=createToggleFunction(node,list);
          child.insertBefore(node,child.firstChild);
  }
}

child=child.nextSibling;
  }

}

Answer 1

所以，我想你有一个像这样的dom：

<ul id="listCategories">
     <li class="category"><!-- one collapsible list --></li>
     <li class="category"><!-- another collapsible list --></li>
     <li class="category">...
</ul>

并想从makeCollapsible(document.getElementById('listCategories'), 1)迁移到makeCollapsible(getElementsByClassName(document, 'category'), 1)？

然后，您需要遍历给定的节点列表，而不是给定元素的子节点：

function makeCollapsible(lists, listState){
    if (listState!=null) defaultState=listState;
    for (var i=0; i<lists.length; i++) {
        var child = lists[i];
        if (child.nodeType!=1) continue; // not really neded
        // and then build the list and add the buttons:
        var list=new Array();
        ...
        if(defaultState==1) {
            ...
        } else {
            ...
        }
    }
}