Question

我想以2种语言在我的博客上提供我的所有帖子。我发现了一种通过按钮将文本更改为另一种语言的方法。但我不能在文本中添加任何图像或其他CSS样式。然后按钮不再起作用了。

<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. I can't put any css or html in here';">English</button> &#160; <button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another language';">Other language</button>

<div id="chgtext">This is the default text. I can't put any css or html in here</div>

有没有办法可以制作这样的东西，但是我可以在代码中放置图像，字体样式......代码？

或者是否有办法只改变文字。并将图像保留为多个div？

TEXT（更改）

IMAGE

TEXT（更改）

http://oihanevalbuenaredondo.be/2017/01/17/current-favorites-voorbeeld/ - ＆gt;这是我想用2种语言发布的帖子的一个例子。我需要多个图像，需要使用按钮

将帖子中的文本从一种语言更改为另一种语言

Answer 1

您可以使用这个简单的代码创建自己的代码，只需获取一个条目并将其替换为数组中的值。例如：

var lang = {
    "helloWorld": {
        en: "Hello World",
        fr: "Bonjour monde"
    },
    "mynameis": {
        en: "My name is",
        fr: "Mon nom est"
    }
}

$(document).ready(function(){
    $(body).find('.trn').each(function($elem){
        var currentLang = 'en';
        $($elem).html(lang[$($elem).data('trn')][currentLang]);
    });
 });

对于每个文字，您需要使用密钥和类trn添加数据，就像这样。

<span class="trn" data-trn="mynameis"></span> Nicolas

检查this link以获取更多信息

希望它有所帮助！

尼克

Answer 2

你在第一个onclick“can not”的文本中有一个单引号，这导致javascript认为它是字符串的结尾。你需要添加反斜杠“不能”

<button onclick="document.getElementById('chgtext').innerHTML='<p>Blue</p>This is the default text. I can\'t put any css or html in here';">English</button>&#160; <button onclick="document.getElementById('chgtext').innerHTML='<p>Blue</p>Text changed into Another language';">Other language</button>

<div id="chgtext"><p>Blue</p>This is the default text. I can't put any css or html in here</div>

<style>
p {color:blue;}
</style>

Answer 3

您需要遍历元素的所有子元素。使用JQuery，假设只有一个级别的后代，你可以使用这样的东西......

$('#chgtxt').children().each( function() {
   var oldtext = $(this).text();
   if (oldtext) {
     var newtext = oldtext+" CHANGED. ";
     $(this).text(newtext);
   }
});

Answer 4

您需要转义插入内容中的所有引号。看一下片段并尝试点击按钮

＆＃13;

<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. <img src=\'http://lorempixel.com/output/nightlife-q-c-50-50-6.jpg\'> NOW I can put any css or <span style=\'color :red;\'>html</span> in here';">English</button> &#160; 
<button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another <span style=\'color :red;\'>language</span>';">Other language</button>

<div id="chgtext">This is the default text. I can't put any css or html in here</div>

＆＃13;

<p>
<style>
#eng_lang {
  display: block;
}
#nl_lang {
  display: none;
}
</style>
<button onclick=" document.getElementById('eng_lang').style.display='block'; document.getElementById('nl_lang').style.display='none'">English</button> &#160; <button onclick="document.getElementById('eng_lang').style.display='none';document.getElementById('nl_lang').style.display='block'">Nederlands</button></p>
<div id="eng_lang">
  <h2>Here is some text 
    <span style="color: green;">english</span>
  </h2>
  <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo2yKPonCY-BZrk9s69oH_-gal_yxDRgHxdyXhqP79D0YESVuB" width="120px" height="120px">
     Now you can place here any text, tags and images.
</div>
<div id="nl_lang">
  <h2>Here is another text 
    <span style="color: blue;">Netherlands</span>
  </h2>
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQcE1c0chXugmq_V5qwp51ffAuP7ecGMsWmshnntwAXVGUgVptH" width="100px" height="100px">
  Put here whatever you want. 
  <p>This is paragraph</p>
</div>

＆＃13;

我想用按钮更改文本

4 个答案: