将类添加到JavaScript选择器？

createDocumentStructure（'h3，.twistytext'）;是我遇到的问题 - 最后一行。将类添加到JavaScript选择器？

它的作品，如果我只有在那里的H3，但也想增加一个类。尝试了很多不同的方法来解释类，但没有任何工作。所以我想扩大/崩溃为<div>，然后<h3 class="twistytext">。

// JavaScript Document 
var collapseDivs, collapseLinks; 

function createDocumentStructure(tagName) { 
    if (document.getElementsByTagName) { 
     var elements = document.getElementsByTagName(tagName); 
     collapseDivs = new Array(elements.length); 
     collapseLinks = new Array(elements.length); 
     for (var i = 0; i < elements.length; i++) { 
      var element = elements[i]; 
      var siblingContainer; 
      if (document.createElement && (siblingContainer = document.createElement('div')) && siblingContainer.style) { 
       var nextSibling = element.nextSibling; 
       element.parentNode.insertBefore(siblingContainer, nextSibling); 
       var nextElement = elements[i + 1]; 
       while (nextSibling != nextElement && nextSibling != null) { 
        var toMove = nextSibling; 
        nextSibling = nextSibling.nextSibling; 
        siblingContainer.appendChild(toMove); 
       } 
       siblingContainer.style.display = 'none'; 
       collapseDivs[i] = siblingContainer; 
       createCollapseLink(element, siblingContainer, i); 
      } else { 
       // no dynamic creation of elements possible 
       return; 
      } 
     } 
     createCollapseExpandAll(elements[0]); 
    } 
} 

function createCollapseLink(element, siblingContainer, index) { 
    var div; 
    if (document.createElement && (div = document.createElement('div'))) { 
     div.appendChild(document.createTextNode(String.fromCharCode(160))); 
     var imge = document.createElement('img'); 
     imge.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/expand.jpg'; 
     imge.setAttribute('width', '20px'); 
     imge.setAttribute('height', '20px'); 
     imge.setAttribute('class', 'imge') 
     imge.alt = 'Expand'; 
     var link = document.createElement('a'); 
     link.collapseDiv = siblingContainer; 
     link.href = '#'; 
     link.appendChild(imge); 
     link.onclick = collapseExpandLink; 
     //link.onclick = removediv; 
     collapseLinks[index] = link; 
     div.appendChild(link); 
     element.appendChild(div); 
    } 
} 

function collapseExpandLink(evt) { 
    if (this.collapseDiv.style.display == '') { 
     this.parentNode.parentNode.nextSibling.style.display = 'none'; 
     this.firstChild.alt = 'expand'; 
     this.firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/expand.jpg'; 
    } else { 
     this.parentNode.parentNode.nextSibling.style.display = ''; 
     var imgc = document.createElement('img'); 
     imgc.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/collapse.jpg'; 
     imgc.setAttribute('width', '20px'); 
     imgc.setAttribute('height', '20px'); 
     imgc.setAttribute('class', 'imge') 
     imgc.alt = 'Collapse'; 
     this.firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/collapse.jpg'; 
     this.firstChild.alt = 'Collapse'; 
     // this.firstChild.setAttribute("src","collapse-eikon.jpg"); 
    } 
    if (evt && evt.preventDefault) { 
     evt.preventDefault(); 
    } 
    return false; 
} 

function createCollapseExpandAll(firstElement) { 
    var div; 
    if (document.createElement && (div = document.createElement('div'))) { 
     var link = document.createElement('a'); 
     link.setAttribute('class', 'expanderall'); 
     link.href = '#'; 
     link.appendChild(document.createTextNode('Expand all')); 
     link.onclick = expandAll; 
     div.appendChild(link); 
     div.appendChild(document.createTextNode(' ')); 
     link = document.createElement('a'); 
     link.setAttribute('class', 'expanderall'); 
     link.href = '#'; 
     link.appendChild(document.createTextNode('Collapse all')); 
     link.onclick = collapseAll; 
     div.appendChild(link); 
     firstElement.parentNode.insertBefore(div, firstElement); 
    } 
} 

function expandAll(evt) { 
    for (var i = 0; i < collapseDivs.length; i++) { 
     collapseDivs[i].style.display = ''; 
     collapseLinks[i].firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/collapse.jpg'; 
    } 
    if (evt && evt.preventDefault) { 

     evt.preventDefault(); 
    } 
    return false; 
} 

function collapseAll(evt) { 
    for (var i = 0; i < collapseDivs.length; i++) { 
     collapseDivs[i].style.display = 'none'; 
     collapseLinks[i].firstChild.src = 'https://smartsales.thomsonreuters.com/library/template/cssfiles/gsam/expand.jpg'; 
    } 
    if (evt && evt.preventDefault) { 
     evt.preventDefault(); 
    } 
    return false; 
} 

window.onload = function (evt) { 
    createDocumentStructure('h3, .twistytext'); 
}

来源

2014-06-25 blankip

''h3.twistytext''？ – Teemu

@Teemu - 这是我尝试的第一件事。 – blankip

@blankip请花时间正确格式化您的代码。它使其他人更容易阅读和帮助您。 –

在功能

function createDocumentStructure(tagName) {

更改

function createDocumentStructure(tagName,className) {

，并在该函数中添加代码

if(className) 
{ 
    elements.className = className; 
}

更多细节请参考Change an element's class with JavaScript

来源

2014-06-25 07:13:41 rjdmello

谢谢。完美的作品。并感谢链接到语法。我不会猜到它弹出括号外。 – blankip

另一件需要注意的事情是：你必须相应地调用它，而不是使用这个createDocumentStructure（'h3，.twistytext'）;你必须把它叫做createDocumentStructure（'h3'，'twistytext'）;并且不要使用。类 –

@MahbubulHaque和rjdmello - 这只适用于IE7。我只是在测试，一旦我尝试FF和Chrome，它不起作用。 – blankip

将类添加到JavaScript选择器？

回答

相关问题