我正在使用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
的正确用法是什么?
答案 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
的更多信息 上的示例答案 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
标记有效,嵌入已翻译的内容。