Javascript Javascript在点击时更改文本，然后再次更改回来
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12146557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript change text onClick and then change back again
提问by user1505573
I am trying to change the text of a link on click and then change back again to the original when clicked again. I am able to change the text, (from READ MORE... to CLOSE) but have been fighting to change the text back again (from CLOSE to READ MORE...)
我试图在单击时更改链接的文本，然后在再次单击时再次更改回原始文本。我可以更改文本（从 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>
Thanks for any help in advance.
提前感谢您的任何帮助。
回答by 0x499602D2
This should work:
这应该有效：
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...';
}
}
}
回答by Mathijs Segers
<a href="javascript:void(0)" onclick="if(this.innerHTML =='Read More'){this.innerHTML = 'Close'}else{this.innerHTML = 'Read More'}">Read More</a>
Just change the javascript:void(0);with the open/close function and make sure to return false.
只需javascript:void(0);使用 open/close 函数更改，并确保返回 false。
回答by Shabab
Your function only calls one value, and once called, the elements in question aren't changing their function calls.
您的函数只调用一个值，一旦调用，相关元素不会改变它们的函数调用。
To clarify, I believe you should use a method of toggling the text instead of changing it. Please refer to the toggling portions of this tutorialto have your links change text as desired.
澄清一下，我认为您应该使用一种切换文本而不是更改文本的方法。请参阅本教程的切换部分，让您的链接根据需要更改文本。
回答by Decker W Brower
Thats because your function is only setting the value to be 'Close' when the element gets a click. you need to check what the value is before you set it. so you should modify your function to be like this:
那是因为您的函数仅在元素获得点击时将值设置为“关闭”。您需要在设置之前检查该值是什么。所以你应该修改你的函数是这样的：
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';
}
}
}
}
}
回答by Dau
<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/>
