javascript - i18next:覆盖嵌套项目

Question

我正在使用 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 是什么？

Answer 1

我也遇到了同样的问题，我是这样解决的:

$('[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>

您可以指定自定义属性或特殊属性之一(例如前置、附加等)来指定您希望翻译文本出现的位置。更多信息jquery i18next doc

jsfiddle 上的示例