i18next:覆盖嵌套项目
i18next: overwrites nested items
我正在使用 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
。
相反,我需要 "save" 现有项目并在它们之后附加翻译。
复选框表单条目中 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
的更多信息
上的示例
我是这样解决的:
<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
标签起到了作用,嵌入翻译后的内容。
我正在使用 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
。
相反,我需要 "save" 现有项目并在它们之后附加翻译。
复选框表单条目中 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
的更多信息 上的示例我是这样解决的:
<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
标签起到了作用,嵌入翻译后的内容。