Simple localization implementation

Demonstrates use of data attributes to dynamically set text

by doug65536

HTML

<ul>
    <li data-i18n="Help"></li>
    <li data-i18n="Quit"></li>
</ul>
<label>
    <input name="lang" type="radio" value="en" />English</label>
<label>
    <input name="lang" type="radio" value="fr" />Français</label>

JavaScript

// "i18n" means internationalization (18 letters between the i and n)
// This comes from json
var i18n = {
    'en': {
        'Help': 'Help',
        'Quit': 'Quit'
    },
    'fr': {
        'Help': 'Aider',
        'Quit': 'Quitter'
    }
};

function translate(lang) {
    $('[data-i18n]').each(function () {
        var element = $(this);
        var key = element.data('i18n');
        var translated = i18n[lang][key];
        if (translated !== undefined) {
            element.text(translated);
        }
    });
}

$('input[name="lang"]').on('click', function (event) {
    translate($(event.target).val());
});