Как заменить вызов функции getElementById с getElementsByClassName

Question

Я хотел бы использовать вызов функции getElementsByClassName К (https://stackoverflow.com/a/1933623/1336540) для функции, которая делает списки разборными и в настоящее время написано, чтобы работать только с 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 с КМП 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);}; 
} 

Спасибо, что прочитали это и попытались мне помочь!

Edit: функция 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

Таким образом, я предполагаю, что у вас есть РОМ, как это:

<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 { 
      ... 
     } 
    } 
}