在顯示/隱藏功能中更改鏈接文本

Question

好的，所以我一直在努力解決這個問題，現在以為我需要一點幫助。

我有兩個段落，分別是ID的show1和show2。

我要給每個人寫一個簡短的文本，單擊它們上方的鏈接后，它們應該會擴展。

我的函數可以展開和折疊，但是感覺好像沒有得到鏈接的值，更確切地說，是因為我得到“ link is null”，所以鏈接文本沒有得到。

它一直有效到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腳本外，所有內容都使用單例方法，也許會對其他人有所幫助：）