Javascript更改文本onClick然后再次更改

时间:2012-08-27 17:24:08

标签: javascript text onclick hyperlink

我尝试在点击时更改链接的文本,然后再次单击时再次更改回原始文本。我可以更改文本(从READ MORE ...到CLOSE),但一直在努力改变文本(从CLOSE到READ MORE ......)

 <script language="javascript">
 function changeText(idElement){
 if(idElement==1){
 document.getElementById('element'+idElement).innerHTML ='Close';
 } else if(idElement==2){
 document.getElementById('element'+idElement).innerHTML ='Close';
 }
 }
 </script>

 <a id="element1" onClick="javascript:changeText(1)">Read More...</a>
 <a id="element2" onClick="javascript:changeText(2)">Read More...</a>

感谢您提前提供任何帮助。

5 个答案:

答案 0 :(得分:7)

这应该有效:

function changeText(idElement) {
    var element = document.getElementById('element' + idElement);
    if (idElement === 1 || idElement === 2) {
        if (element.innerHTML === 'Read More...') element.innerHTML = 'Close';
        else {
            element.innerHTML = 'Read More...';
        }
    }
}

演示: http://jsfiddle.net/UfVAH/

答案 1 :(得分:5)

<a href="javascript:void(0)" onclick="if(this.innerHTML =='Read More'){this.innerHTML = 'Close'}else{this.innerHTML = 'Read More'}">Read More</a>

只需使用打开/关闭功能更改javascript:void(0);,并确保返回false。

答案 2 :(得分:0)

你的函数只调用一个值,一旦被调用,所讨论的元素就不会改变它们的函数调用。

为了澄清,我相信您应该使用切换文本而不是更改文本的方法。请参阅this tutorial的切换部分,让您的链接根据需要更改文字。

答案 3 :(得分:0)

这是因为你的功能只是在元素点击时将值设置为'Close'。您需要在设置之前检查值是什么。所以你应该修改你的功能:

    function changeText(idElement){
        if(idElement==1){
            if( document.getElementById('element'+idElement).innerHTML == 'Read More' ){
                document.getElementById('element'+idElement).innerHTML = 'Close';
            } 
            else if( document.getElementById('element'+idElement).innerHTML == 'Close' ) {
                document.getElementById('element'+idElement).innerHTML = 'Read More';
            }
        } 
        else if(idElement==2){
            if( document.getElementById('element'+idElement).innerHTML == 'Read More' ) {
                document.getElementById('element'+idElement).innerHTML = 'Close';
            }
            else if( document.getElementById('element'+idElement).innerHTML == 'Close' ) {
                document.getElementById('element'+idElement).innerHTML = 'Read More';
            }
        }
    }

}

答案 4 :(得分:0)

<script language="javascript">
function changeText(idElement){
    if(idElement==1){
        document.getElementById('element'+idElement).innerHTML ='<a href="http://www.google.com">Google</a>';
    } else if(idElement==2){
        document.getElementById('element'+idElement).innerHTML ='<a href="http://woork.blogspot.com">Woork</a>';
    }
}
</script>

<ul>
<li id="element1">Google</li>
<li id="element2">Woork</li>
</ul>
<a href="#" onClick="javascript:changeText(1)">Change Google into a link</a><br/>
<a href="#" onClick="javascript:changeText(2)">Change Woork into a link</a><br/>