Question

好的，所以我一直在努力解决这个问题，现在我想要一点帮助。

我有两个id为show1和show2的段落。

每个人都有一个简短的文字，只要点击上面的链接就可以扩展。

我的功能可以扩展和折叠，但感觉它没有得到链接的值，更确切地说，链接文本，因为我得到“链接为空”。

它一直工作到var status和innerHTML，如果我注释掉它的两行，那么它不会改变我的链接文本从show到hide ...所以如果有任何一种灵魂可以帮我解决它我将不胜感激。

/* Function created by "Simon Willson" to be able to 
call several functions with a single event */

//Create the function
function addLoadEvent(func) {
//Create a variable for window.onload event
var oldonload = window.onload;
//If window.onload is NOT a function, then assign 'func' to window.onload
if (typeof window.onload != 'function') {
    window.onload = func;
//If window.onload already is a function then make a new function
} else {
    window.onload = function() {
    //To do what the old onload function did
    if (oldonload) {
    oldonload();
    }
    //then do whatever the new function does 
    func();
    }
}
}

function newLink() {
    //Make a few safety check to see if the browser can handle the elements
    if (!document.getElementById) {
        if (!document.createElememt) {
            if (!document.createTextNode) {
                return false;
            }
        }
    }
    //Create the link
    newLinkElement = document.createElement('a');
    //Give the link a Id
    newLinkElement.id = 'show1_link';
    //Set the href
    newLinkElement.href = "javascript:showHide(this.id,'show1')";
    //Create a variable for the link text
    var linkText = document.createTextNode('Visa mera information');
    //Append the text to the link
    newLinkElement.appendChild(linkText);
    //Create a variable for the paragraph
    var elem = document.getElementById('show1')
    //Insert the text before the paragraph with the Id show1
    elem.parentNode.insertBefore(newLinkElement,show1);
}
addLoadEvent(newLink);

function showHide(link_id,elemId) {
    var link = document.getElementById(link_id);
    var text = document.getElementById(elemId);
    text.style.display = (text.style.display == 'block') ? 'none' : 'block';
    var status = (text.style.display == 'block') ? 'none' : 'block';
    text.style.display = status;
    link.innerHTML = (status == 'block') ? 'Dölj information' : 'Visa mera information';
}

Answer 1

在你的函数showHide中：

function showHide(link_id,elemId) {
    var link = document.getElementById(link_id);
    var text = document.getElementById(elemId);
  //  text.style.display = (text.style.display == 'block') ? 'none' : 'block';
    var status = (text.style.display == 'block') ? 'none' : 'block';
    text.style.display = status;
    link.innerHTML = (status == 'block') ? 'Dölj information' : 'Visa mera information';
}

您正在设置text.style.display两次。删除我在上面显示评论的行。

我可能会写如下：

function showHide (linkEl, textEl) {
  var status;
  typeof linkEl === 'string' && (linkEl = document.getElementById (linkEl));
  typeof textEl === 'string' && (textEl = document.getElementById (textEl));

  if (textEl) {
    textEl.style.display = (status = (textEl.style.display === 'block')) ? 
                             'none' : 'block';
    linkEl && (linkEl.innerHTML = status ? 
                             'Dölj information' : 'Visa mera information');
  }
}

这允许您使用元素的id或元素本身来调用showHide。它还会检查元素是否存在，如果找不到则不执行任何操作。

有关完整工作的示例，请参阅http://jsfiddle.net/CgnXL/

Answer 2

我玩了两个你的代码示例，但最终做了

//Create the function
function addLoadEvent(func) {
//Create a variable for window.onload event
var oldonload = window.onload;
//If window.onload is NOT a function, then assign 'func' to window.onload
if (typeof window.onload != 'function') {
    window.onload = func;
//If window.onload already is a function then make a new function
} else {
    window.onload = function() {
    //To do what the old onload function did
    if (oldonload) {
    oldonload();
    }
    //then do whatever the new function does 
    func();
    }
}
}
//Add as many functions you like with addLoadEvent(functionName);


/* Create the object hideParagraph, showOrHide using singleton
method, this way the instance only occur once and not globaly, 
then called using (function()ObjName.functionName('classNameHere'));*/

//Create the global variable
var hideParagraph = {
//Create the private function for the hidden function
hideText: function() {
    //Make a few safety checks to see if the browser can understand the code
    if (!document.getElementsByTagName) {
        if (!document.getAttribute) {
        return false;
        }
    }
    //Make a variable to get tag names with a wildcard
    var elements = document.getElementsByTagName('*');
    //Make the loop
    for (var i = 0; i < elements.length; i++) {
        //If it belongs to the class show
        if (elements[i].getAttribute('class') == 'show') {
        //Then hide it
        elements[i].style.display = 'none';
        }
    }
}
}
addLoadEvent(hideParagraph.hideText);


//Create the global variable
var showOrHide = {
//Create the private function for the link
createLinks: function(nodeClass) {
    //Make a few safety checks to see if the browser can understand the code
    if (!document.getElementsByClassName) {
        if (!target.parentNode) {
            if (!document.createElement) {
            return false;
            }
        }
    }
    //Get all the nodes of a class
    var nodes = document.getElementsByClassName(nodeClass);
    //Make the loop
    for (var i = 0; i < nodes.length; i++) (function(i) {
        //Make a variable for the nodes
        var target = nodes[i];
        //Create the link element
        var a = document.createElement('a');
        //Prevent the page from ever refeshing on click
        a.href = 'javascript:void(0)';
        //Set the link text
        a.innerHTML = 'Visa mera information';
        //Set the click function for the link
        a.onclick = function() {
            /* Call the global variable showOrHide with the function     showHide 
                using this link and it's target, the variable we made for nodes[i] */
            showOrHide.showHide(this, target);
        }
        //Get the parent node, in this case the parent is 'post'
        var parent = target.parentNode;
        /* Insert the link (a) before it's target (nodes[i]) element, the target
            node, the node is set when you call the function */
        parent.insertBefore(a, target);
    //Close the loop and then close up and end with the function name (i)
    })(i);
/* Close the createLinks function and after put a punctuation mark , 
    that mark separates one function from another in a singleton method */
},
//Another private function
showHide: function(trigger, target) {
    //Set the toggle option
    var status = (target.style.display == 'block') ? 'none' : 'block';
    //Depending on what the status is
    target.style.display = status;
    //Change the link text accordingly
    trigger.innerHTML = (status == 'block') ? 'Dölj information' : 'Visa mera information';
}
}
addLoadEvent(function() { showOrHide.createLinks('show')});

以为我分享了我完整且有效的代码示例，用于隐藏一个类所需的段落然后循环并生成与您自己定义的类的段落一样多的链接，然后将它们放在该元素上方。除了第一个addLoadEvent脚本之外，一切都在使用单例方法，也许它会帮助其他人：）

更改显示/隐藏功能中的链接文本

2 个答案: