用javascript更改文本並保留src

我使用腳本來使用此代碼翻譯我的頁面：

<script> 
     var translations= { 'en' : 
           {'title' : 'Title', 'textimg' : 'English text'}, 
          'fr' : 
           {'title' : 'Titre', 'textimg' : 'Texte français'} 
          }; 
     function doTranslate(language) { 
      for(id in translations[language]) { 
       document.getElementById(id).innerHTML = translations[language][id]; 
      } 
     } 
</script>

而且這個網站：

<a href="javascript:doTranslate('fr')"><img src="img/Fr-Flag.png"></a> 
<a href="javascript:doTranslate('en')"><img src="img/UK-Flag.png"></a> 
<h2 id="title">Title</h2>

，當我使用的圖像（小圖標），問題就來了：在文字改變，但src似乎不見了，所以當文字改變時，圖像不顯示：

<img id="textimg" src="img/fav-rond.png">English text</img>

如何解決這個問題？

來源

2016-04-06 Guillaume

您的預期產出是多少？像'English [x]''英文'是一些任意翻譯的文本，'[x]'是標誌圖像？ – kazenorin

我希望在改變後的文字旁邊有這樣的圖像，例如： 'image'英文文本 - >'image'法國德文 – Guillaume

請參閱我的回答 – Pimmol

請參閱此回答有關img標籤內內容：Div tag within img tag

但一個可能的解決方法是刪除從img的id並創建一個圍繞與ID文本的新元素。例如：

<img src="img/fav-rond.png" /> 
<span id="textimg">English text</span>

而且演示：https://jsfiddle.net/7j2ckw0r/1/

來源

2016-04-06 09:28:42 Pimmol

我已經試過這個，但圖像不在文本旁邊 – Guillaume

讓它'span'或者使用一點CSS – Pimmol

是啊！有用！非常感謝！！ – Guillaume

這應該解決您的問題。

document.getElementById(id).setAttribute("id", translations[language][id])

您不應該使用innerHTML來解決此問題。

來源

2016-04-06 09:27:52

我不相信OP想要更新'id' – Pimmol

@SGS Venkatesh您的解決方案幫助我解決了另一個問題（href）！ ;） – Guillaume

@Guillaume很高興知道。 :) –

的<img>標籤不允許內的任何信息，這是一個"Empty element"

如果裏面添加任何文字，也成爲一個無效的HTML文本。

你可以做的是增加一個alt屬性：

<img id="textimg" src="img/fav-rond.png" alt="English text"/>

來源

2016-04-06 09:30:51

我強烈建議您訪問此鏈接，你會發現在純JavaScript代碼轉換你的HTML頁面的最佳方式。

JQuery search dom elements just after rendering and replace keys by its corresponding values

來源

2016-04-06 09:31:06

這是不可能的形象和訪問，與其後直接將文本添加到圖像標籤，而不是放置跨度元素。

<img src="img/fav-rond.png" /><span id="textimg">English text</span>

來源

2016-04-06 09:44:39

用javascript更改文本並保留src

回答

相關問題