Skip to main content
adicionou 120 caracteres ao conteúdo
Fonte Link
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94

Pela simplicidade, sugiro fazer um método em jQuery, mas parase quiser escrever um pouco mais e ficar independente da biblioteca, pode fazer conforme o exemplo sugerido pelo @TobyMosque:

Pela simplicidade, sugiro fazer um método em jQuery, mas para escrever um pouco mais e ficar independente da biblioteca, pode fazer conforme o exemplo sugerido pelo @TobyMosque:

Pela simplicidade, sugiro fazer um método em jQuery, mas se quiser escrever um pouco mais e ficar independente da biblioteca, pode fazer conforme o exemplo sugerido pelo @TobyMosque:

adicionou 120 caracteres ao conteúdo
Fonte Link
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94

SugiroPela simplicidade, sugiro fazer um método em jqueryjQuery, acredito que é o melhor amas para escrever um pouco mais e ficar independente da biblioteca, pode fazer conforme o exemplo sugerido pelo @TobyMosque:

Aqui o exemplo funcionando e JavaScript Puro

E aqui o exemplo funcionando com jQuery

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

Aqui o exemplo funcionando

Pela simplicidade, sugiro fazer um método em jQuery, mas para escrever um pouco mais e ficar independente da biblioteca, pode fazer conforme o exemplo sugerido pelo @TobyMosque:

Aqui o exemplo funcionando e JavaScript Puro

E aqui o exemplo funcionando com jQuery

adicionou 110 caracteres ao conteúdo
Fonte Link
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94
$( document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        var el_translate = $document.querySelector('[data-translate]');
 $('#tradutor').val(el_translate       var tradutor = document.datagetElementById('translate')'tradutor'); 
  
        tradutor.value = setLang(el_translate);.dataset.translate;        
     $('#tradutor')   tradutor.onaddEventListener('change'"change", function (event) {
       var lang    el_translate.dataset.translate = $(this)event.valtarget.value;
            setLang(el_translate);
       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",
            "content_PT":"Português",
            "content_EN":"Inglês",
            "content_ES":"Espanhol",
            "content_PE":"Língua do P",

        },
        "en-US":{
            "content_A":"The Book's on the table",
            "content_B":"Hello World",
            "content_C":"My name is Ivan",
            "content_PT":"Portuguese",
            "content_EN":"English",
            "content_ES":"Espanish",
            "content_PE":"Language of P",
        },
        "es-GT":{
            "content_A":"El libro está en la mesa",
            "content_B":"Hola mundo",
            "content_C":"Mi nombre es Iván",
            "content_PT":"Portugués",
            "content_EN":"Inglés",
            "content_ES":"Español",
            "content_PE":"Idioma hacer P",
        },
        "pe-PG":{
            "content_A":"PO PliPvro PesPtá PsoPbre Pa PmePsa",
            "content_B":"POPlá PMunPdo",
            "content_C":"PMeu PnoPme Pé PIPvan",
            "content_PT":"PPorPtuPguês",
            "content_EN":"PInPglês",
            "content_ES":"PEsPpanhol",
            "content_PE":"PLínPgua Pdo PP",
        }
    };

    return function (e) {
        var elementos = $document.querySelectorAll("[data-i18n]");
        [].forEach.call(elementos, function (el, index) {
            el.textContent = i18n[e.data('translate')][eldataset.translate][el.dataset.i18n];
        }); 
    };
})();

Aqui o exemplo funcionando

Aqui o exemplo funcionando

Editado: Conforme sugestão de @TobyMosque, que achei muito bem-vinda, uma adaptação sem uso de jQuery:

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

 document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        var el_translate = document.querySelector('[data-translate]');
        var tradutor = document.getElementById('tradutor');
 
        tradutor.value = el_translate.dataset.translate;        
        tradutor.addEventListener("change", function (event) {
            el_translate.dataset.translate = event.target.value;
            setLang(el_translate);
        });
        setLang(el_translate);
    }
}
    
var setLang = (function() {
    var i18n = {
        "pt-BR":{
            "content_A":"O livro está sobre a mesa",
            "content_B":"Olá Mundo",
            "content_C":"Meu nome é Ivan",
            "content_PT":"Português",
            "content_EN":"Inglês",
            "content_ES":"Espanhol",
            "content_PE":"Língua do P",

        },
        "en-US":{
            "content_A":"The Book's on the table",
            "content_B":"Hello World",
            "content_C":"My name is Ivan",
            "content_PT":"Portuguese",
            "content_EN":"English",
            "content_ES":"Espanish",
            "content_PE":"Language of P",
        },
        "es-GT":{
            "content_A":"El libro está en la mesa",
            "content_B":"Hola mundo",
            "content_C":"Mi nombre es Iván",
            "content_PT":"Portugués",
            "content_EN":"Inglés",
            "content_ES":"Español",
            "content_PE":"Idioma hacer P",
        },
        "pe-PG":{
            "content_A":"PO PliPvro PesPtá PsoPbre Pa PmePsa",
            "content_B":"POPlá PMunPdo",
            "content_C":"PMeu PnoPme Pé PIPvan",
            "content_PT":"PPorPtuPguês",
            "content_EN":"PInPglês",
            "content_ES":"PEsPpanhol",
            "content_PE":"PLínPgua Pdo PP",
        }
    };

    return function (e) {
        var elementos = document.querySelectorAll("[data-i18n]");
        [].forEach.call(elementos, function (el, index) {
            el.textContent = i18n[e.dataset.translate][el.dataset.i18n];
        }); 
    };
})();

Aqui o exemplo funcionando

Editado: Conforme sugestão de @TobyMosque, que achei muito bem-vinda, uma adaptação sem uso de jQuery:

adicionou 67 caracteres ao conteúdo
Fonte Link
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94
Carregando
Fonte Link
Ivan Ferrer
  • 12,3mil
  • 3
  • 35
  • 94
Carregando