2012-08-27 93 views
1

我試圖更改單擊鏈接上的文本,然後再次單擊時再次更改回原始。我能更改文本,(從讀更多...可關閉),但已經戰鬥再次更改文本(從接近讀更多...)Javascript更改文字onClick,然後再次更改

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

感謝您的幫助提前。

+0

你應該在「不顯眼的JavaScript」的概念上搭配,mate ... – MalSu

回答

4

這應該工作:

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/

0

您的函數只調用一個值,一旦調用,所涉及的元素不會更改其函數調用。

爲了澄清,我相信你應該使用切換文本而不是改變它的方法。請參閱this tutorial的切換部分,讓您的鏈接根據需要更改文字。

0

那是因爲你的函數只將該值設置爲 '關閉' 時,元素獲得的點擊。你需要在設置之前檢查它的價值。所以你應該修改你的函數是這樣的:

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

}

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/> 
4
<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。

相關問題