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

Posted 2023-03-30

【中文标题】使用 i18next（占位符，值）翻译自定义属性

【英文标题】：Translate custom attributes with i18next (placeholder, value)

【发布时间】：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>

JS

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

【参考方案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] 即可工作。