开发者问题收集

将类添加到 javascript 选择器?

2014-06-25
147

createDocumentStructure('h3, .twistytext'); 是我遇到问题的那一行 - 最后一行。

如果我只有 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');
}
1个回答

在您的函数中

function createDocumentStructure(tagName) {

更改为

function createDocumentStructure(tagName,className) {

并在该函数中添加代码

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

有关更多详细信息,请参阅 使用 JavaScript 更改元素的类

rjdmello
2014-06-25