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

Question

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

我有两个段落，id 分别为 show1 和 show2。

我有一个简短的文本，每个文本都应该在单击它们上方的链接时展开。

我的函数可以展开和折叠，但感觉它没有获得链接的值，更准确地说，是链接文本，因为我得到“链接为空”。

它一直有效到 var status 和 innerHTML，如果我注释掉这两行它有效，那么它不会将我的链接文本从显示更改为隐藏...所以如果有任何好心人可以帮助我将不胜感激。

/* 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

在你的函数中显示隐藏：

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 脚本外，一切都使用单例方法，也许它会帮助其他人:)