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

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

在你的函数 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/一个完整的例子