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上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>

您可以指定一個自定義屬性，也可以指定特殊屬性之一，例如prepend，append等，以指定要在其中顯示翻譯后的文本的位置。 有關jquery i18next doc的更多信息

jsfiddle上的示例

Answer 2

我以這種方式解決了：

<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標記可以解決問題，嵌入已翻譯的內容。