Translation i18next

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/i18next/1.6.3/i18next-1.6.3.min.js"></script>
<div data-i18n="title"></div>
<input placeholder="Hello" value="name">
<div class="holder"></div>
<button class="lang" data-lang="en">Eng</button>
<button class="lang" data-lang="ch">Chi</button>

    <!-- http://stackoverflow.com/q/22728797/1090562 -->

CSS

.holder {
    height : 100px;
}

JavaScript

var resources = {
    "ch": {
        "translation": {
            "title": "页面标题",
                "placeholder_1": "输入您的名字",
                "value_1": "值"
        }
    },
        "en": {
        "translation": {
            "title": "title of the page",
                "placeholder_1": "enter name",
                "value_1": "value 1"
        }
    }
};

$(document).ready(function () {
    i18n.init({
        "lng": 'en',
        "resStore": resources,
        "fallbackLng" : 'en',
        "objectNotation":'true'
    }, function (t) {
        $(document).i18n();
    });

    $('.lang').click(function () {
        var lang = $(this).attr('data-lang');
        i18n.init({
            lng: lang
        }, function (t) {
            $(document).i18n();
        });
    });
});