使用 i18next（占位符，值）翻译自定义属性答案

【问题标题】：Translate custom attributes with i18next (placeholder, value)使用 i18next（占位符，值）翻译自定义属性
【发布时间】：2014-05-08 20:34:33
【问题描述】：

我正在研究i18next 本地化库的可能性。

现在我有以下代码 (full Fiddle is here)：

HTML

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

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

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

它可以翻译所有text 元素，但问题是我无法翻译custom attributes。例如，div 内的文本已翻译，但我不明白如何翻译 placeholder 和 value 等自定义属性。

另一个问题是我的翻译方式。每当单击按钮Chi、Eng 时，我正在初始化翻译（但我不确定这是正确的方法）。编辑我想我找到了解决这个问题的方法（我需要使用 setLng）：i18n.setLng(lang, function(t) { ... })

【问题讨论】：

标签： javascript localization globalization i18next

【解决方案1】：

直接问i18next creator这个问题后，我收到了following reply：我只需要把我的自定义属性放在翻译元素的前面。这是一个例子：

<div data-i18n="[title]titleTransl"></div>
<input data-i18n="[placeholder]placeTransl" value="name">

如果需要多个属性，请用; 分隔它们。

我从中学到了两件事：

我必须阅读更好的文档。
118next 的创作者真的很有帮助（这是对他的感谢）。

【讨论】：

假设我们有这样的东西：<div id="dropdown" class="user_reg"> <select id="country_list" class="selectpicker" data-width="100%" data-size="5" data-live-search="true" required="required"> <option value="" disabled class="country_list">Country</option> </select> </div>，那么我们如何翻译Country？
@AjayKulkarni 在您的示例中，国家不是属性。
是的，所以我尝试了这段代码：<option id="country" value="" disabled class="country_list">Country</option> 和 $('#country').text($.t('app.country'));。成功了
太棒了！我预计这会是冗长而繁琐的

【解决方案2】：

对我来说，以下工作

<input data-i18n="[placeholder]placeTransl" value="name">

所以只需在 [] 和翻译之间输入属性名称。

【讨论】：

抱歉，我没有得到您的回答工作。我必须使用 data-i18n 属性才能让它工作。
哦，抱歉，我没有注意到您的答案有所不同。对此真的很抱歉。 +1
没问题！您的回答为我指明了正确的方向，非常感谢！
我知道已经有一段时间了，但这似乎不再起作用了。有人还在使用成功吗？

【解决方案3】：

考虑调用

$('body').i18n()

在 .done() 函数中。您应该告诉在哪里寻找定位器。这无需在 data-i18n 属性中调用 [placeholders] 即可工作。

【讨论】：