Как изменить текстовый узел, созданный в другой функции

Я делаю простой скрипт показать / скрыть, где у меня есть 2 раздела текста, которые скрыты. Я создал 2 ссылки "читать дальше" с помощью createTextNode. Моя проблема заключается в том, что текст ссылки "Читать дальше" должен измениться на "Скрыть" после того, как ссылка была нажата, а скрытый текст отображается, и когда я нажимаю "Скрыть", она должна измениться на "Читать дальше". Но я не могу найти правильный способ изменить nodeValue для этого, вероятно, потому что я пытаюсь добраться до узла из второй функции "hideShow".

Еще один маленький вопрос. Я не могу заставить скрипт работать, когда я помещаю ссылку в заголовок, только когда я помещаю ссылку перед закрывающим тегом. Я знаю, что это лучший способ, но все же, почему он не работает? Что-то связанное с window.onload?

Спасибо за любую помощь!

Вот мой код:

window.onload = hideText(); 

function hideText() { // Function to hide text and create links
    if (document.getElementsByClassName) { // Check if browser understands method
        var hideElement = document.getElementsByClassName("show"); // Get all elements with class "show" and add in array "hideElement"
        for (var i=0; i < hideElement.length; i++) {
            var link = document.createElement("a"); // Create link for all class "show" elements
            hideElement[i].parentNode.insertBefore(link, hideElement[i]); // Putting links before hidden element
            link.appendChild(document.createTextNode("Read more")); // Give links a textNode child
            link.setAttribute("href", "#"); 
            link.onclick = (function(element) { //When click on link function hideShow
                return function() { hideShow(element); };
            })(hideElement[i]);     
            hideElement[i].style.display = "none"; // If no link click element with class "show" is hidden
        }
    }
} 

function hideShow(element)
{   
    if (element.style.display == "none") {  
        element.style.display = "block";    
        for (var i=0; i<link.length; i++) {     
        link.firstChild.nodeValue = "Hide";
        }   
    }
    else {
        element.style.display = "none";     
    }
}

1 ответ

Решение

Рабочий пример на http://jsfiddle.net/TxWQE/

функция hideText()

в function hideText() ты должен измениться

link.onclick = (function(element) { //When click on link function hideShow
    return function() { hideShow(element); };
})(hideElement[i]);  

в

link.onclick = (function(element, link) { //When click on link function hideShow
    return function() { hideShow(element, link); };
})(hideElement[i], link);

функция hideShow(элемент)

и hideShow(element) функция должна быть

function hideShow(element, link)
{
    if (element.style.display == "none") {  
        element.style.display = "block";    
        link.innerHTML = "Hide";
    }
    else {
        element.style.display = "none";
        link.innerHTML = "Read more";
    }
}
Другие вопросы по тегам