표시/숨기기 기능의 링크 텍스트 변경

Question

좋아, 이제이 문제를 해결하기 위해 노력했으며 지금은 약간의 도움을 요청하고 있습니다.

나는 id가 show1과 show2 인 두 개의 단락을 가지고있다.

나는 위에있는 링크를 클릭 할 때마다 확장해야하는 각각의 짧은 텍스트가 있습니다.

내 함수는 확장 및 축소 기능을 수행하지만 링크의 값을 얻지 못한다고 느낀다. 링크 텍스트가 "link is null"이기 때문에 링크 텍스트가 정확하지 않은 것처럼 느껴진다.

var 상태와 innerHTML까지 모두 작동합니다. 두 줄을 주석 처리하면 잘 보이지 않으므로 내 링크 텍스트가 show에서 hide로 바뀝니다. 그래서 어떤 종류의 영혼이 나를 도울 수 있다면 대단히 감사하겠습니다. 함수의 showHide에서

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

난 당신의 코드 예제 모두 주위 연주를 근무에 대한 http://jsfiddle.net/CgnXL/을 볼 수 있지만

//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 스크립트를 제외한 싱글 톤 메소드를 사용하고 있습니다. 어쩌면 다른 사람에게 도움이 될 것입니다 :)

Answer 2

:

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 설정된다. 위의 주석 처리 된 줄을 제거하십시오. 다음과 같이

아마 이것을 작성합니다 : 이것은 당신이 요소의 id 나 요소 자체 중 하나와 showHide를 호출 할 수 있습니다

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'); 
    } 
} 

. 또한 요소의 존재 여부를 확인하고 요소가없는 경우에는 아무 것도 수행하지 않습니다.

완전히 예를