javascript - 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的正确用法是什么？

最佳答案

我有同样的问题，我这样解决了：

$('[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上的示例

关于javascript - i18next:覆盖嵌套项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42676206/