0

我正在做一个简单的显示/隐藏脚本，其中有 2 个隐藏的文本部分。我在 createTextNode 的帮助下创建了 2 个“阅读更多”链接。我的问题是，一旦单击链接并显示隐藏的文本，链接文本“阅读更多”应该更改为“隐藏”，当我单击“隐藏”时，它应该变回“阅读更多”。但我似乎找不到为此更改 nodeValue 的正确方法，可能是因为我试图从第二个函数“hideShow”到达节点。

还有一个小问题。当我在头部放置一个链接时，我无法让脚本工作，只有当我在结束标记之前放置一个链接时。我知道这是一种更好的方法，但是，为什么它不起作用？与window.onload有关吗？

感谢您的任何帮助！

这是我的代码：

window.onload = hideText(); 

function hideText() { // Function to hide text and create links
    if (document.getElementsByClassName) { // Check if browser understands method
        var hideElement = document.getElementsByClassName("show"); // Get all elements with class "show" and add in array "hideElement"
        for (var i=0; i < hideElement.length; i++) {
            var link = document.createElement("a"); // Create link for all class "show" elements
            hideElement[i].parentNode.insertBefore(link, hideElement[i]); // Putting links before hidden element
            link.appendChild(document.createTextNode("Read more")); // Give links a textNode child
            link.setAttribute("href", "#"); 
            link.onclick = (function(element) { //When click on link function hideShow
                return function() { hideShow(element); };
            })(hideElement[i]);     
            hideElement[i].style.display = "none"; // If no link click element with class "show" is hidden
        }
    }
} 

function hideShow(element)
{   
    if (element.style.display == "none") {  
        element.style.display = "block";    
        for (var i=0; i<link.length; i++) {     
        link.firstChild.nodeValue = "Hide";
        }   
    }
    else {
        element.style.display = "none";     
    }
}
4

1 回答 1

1

http://jsfiddle.net/TxWQE/上的工作示例

函数隐藏文本（）

function hideText()你应该改变

link.onclick = (function(element) { //When click on link function hideShow
    return function() { hideShow(element); };
})(hideElement[i]);

进入

link.onclick = (function(element, link) { //When click on link function hideShow
    return function() { hideShow(element, link); };
})(hideElement[i], link);

函数隐藏显示（元素）

并且hideShow(element)功能应该是

function hideShow(element, link)
{
    if (element.style.display == "none") {  
        element.style.display = "block";    
        link.innerHTML = "Hide";
    }
    else {
        element.style.display = "none";
        link.innerHTML = "Read more";
    }
}
于 2013-08-14T21:06:30.743 回答