Skip to main content
2 de 5
adicionou 67 caracteres ao conteúdo
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94

Sugiro fazer um método em jquery, acredito que é o melhor a fazer:

O conteúdo em HTML:

<select name="translate" id="tradutor">
    <option value="pt-BR">Portunguês</option>
    <option value="en-US">Inglês</option>
    <option value="es-GT">Espanhol</option>
    <option value="pe-PG">Língua do P</option>
    
</select>

<div data-translate="pt-BR">
    <p data-i18n="content_A">The Book's on the table</p>
    <p data-i18n="content_B">Hello World</p>
    <p data-i18n="content_C">My name is Ivan</p>
</div>

E o javascript:

$(function() {
var el_translate = $('[data-translate]');
 $('#tradutor').val(el_translate.data('translate')); 
           setLang(el_translate);
     $('#tradutor').on('change',function() {
       var lang = $(this).val();
       el_translate.data('translate', lang);
         setLang(el_translate);
   });
});

var setLang = function(e) {

    var i18n = {
        "pt-BR":{
            "content_A":"O livro está sobre a mesa",
            "content_B":"Olá Mundo",
            "content_C":"Meu nome é Ivan"
        },
        "en-US":{
            "content_A":"The Book's on the table",
            "content_B":"Hello World",
            "content_C":"My name is Ivan"
        },
        "es-GT":{
            "content_A":"El libro está en la mesa",
            "content_B":"Hola mundo",
            "content_C":"Mi nombre es Iván"
        },
        "pe-PG":{
            "content_A":"PO PliPvro PesPtá PsoPbre Pa PmePsa",
            "content_B":"POPlá PMunPdo",
            "content_C":"PMeu PnoPme Pé PIPvan"
        }
    };
    var elementos = $("[data-i18n]");
    [].forEach.call(elementos, function (el, index) {
        el.textContent = i18n[e.data('translate')][el.dataset.i18n];
    }); 
};

Aqui o exemplo funcionando

Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94