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

我用这种方法解决了：

<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标记起了作用，嵌入了翻译的内容。

Answer 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#附录-内容已经像这样支持了它：

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

您可以指定一个自定义属性，或者指定一个特殊属性，如prepend、追加等，以指定希望翻译的文本出现在何处。关于jquery i18next文档的更多信息

小提琴上的实例