如何更換的getElementById函數調用getElementsByClassName方法

我想通過CMS（https://stackoverflow.com/a/1933623/1336540）爲使列表可摺疊，目前正在編寫的功能使用getElementsByClassName方法函數調用來只的getElementById工作 - http://acmeous.blogspot.com/2011/03/how-to-create-easy-collapsible-and.html 如何更換的getElementById函數調用getElementsByClassName方法

因爲可能有多個具有相同類的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'; 
} 
} 
}

我怎樣才能改變這個函數調用的CMS getElementsByClassName方法來替代的getElementById？

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; 
    } 

}

來源

2012-04-16 Tomas M.

我會強烈建議您切換到像jQuery框架，以使這更容易，而且還以確保您正在編寫的內容適用於多個瀏覽器。例如，在IE9之前不支持getElementsByClassName ... – Prestaul 2012-04-16 16:07:27

您需要向我們展示makeCollapsible的代碼 – Bergi 2012-04-16 16:10:59

@Prestaul如果我有更多的JS經驗，我會真的這樣做。這就是爲什麼我正在尋找可以使用的代碼的和平：/ – 2012-04-16 16:13:05

所以，我想你有這樣一個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 { 
      ... 
     } 
    } 
}

來源

2012-04-16 16:35:31 Bergi

如何更換的getElementById函數調用getElementsByClassName方法

回答

相關問題