i18next:覆盖嵌套项

时间:2017-03-08 16:04:40

标签: javascript jquery i18next

我正在使用i18next翻译我的表单。它工作正常但我有嵌套项目的问题,例如:

<div style="margin-bottom: 25px" class="input-group">
     <div class="checkbox">
         <label class="form" data-i18n="form.checkbox">
             <input type="checkbox" name="checkbox" value="true" required>                                        
         </label>
     </div>
</div>

应用翻译后,实际的HTML代码如下:

<div style="margin-bottom: 25px" class="input-group">
     <div class="checkbox">
         <label class="form" data-i18n="form.checkbox">
             translated value (no more <input> tag!)
         </label>
     </div>
</div>

它用翻译字符串覆盖innerHTML。 相反,我需要“保存”现有项目并在其后附加翻译。

复选框表单条目上i18next的正确用法是什么?

2 个答案:

答案 0 :(得分:2)

我遇到了同样的问题,我解决了这个问题:

$('[data-i18n]').each(function each() {
  const el = $(this);
  const contents = el.contents();

  el.text(i18n.t($(this).attr('data-i18n')))
    .append(contents);
});

编辑:

上面的内容过于简单化了,因为正如您所指出的那样,它不适用于自定义属性。

因此我搜索了一下,我发现它已经被jquery-i18next#append-content支持了,如下所示:

<label class="form" data-i18n="[append]form.checkbox">
    <input type="checkbox" name="checkbox" value="true" required>                                        
</label>

您可以指定自定义属性或其中一个特殊属性,例如 prepend,append 等,以指定您希望翻译文本的显示位置。有关jquery i18next doc

的更多信息

jsfiddle

上的示例

答案 1 :(得分:0)

我这样解决了:

<div class="checkbox">                                        
    <label class="form">                                            
        <input id="input_flag2" type="checkbox" name="disclaimer2" value="true" required>
        <span data-i18n="form.checkbox"></span>
    </label>                                        
</div>

span标记有效,嵌入已翻译的内容。