i18next：覆盖嵌套项目

Question

I'm using i18next to translate my form. It works fine but I have problems with nested items, for example:

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

After applying the translation, the actual HTML code is like this:

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

It overwrites the innerHTML with the translation string. Instead I need to "save" existing items and append the translation after them.

What is the correct use of i18next on a checkbox form entry?

Answer 1

I had the same problem and I solved it like this:

$('[data-i18n]').each(function each() {
  const el = $(this);
  const contents = el.contents();

  el.text(i18n.t($(this).attr('data-i18n')))
    .append(contents);
});

Edit:

The above is oversimplifying the problem because, as you pointed out, it won't work for custom attributes.

Therefore I searched a bit more and I found out it's already supported by jquery-i18next#append-content like this:

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

You can either specify a custom attribute or one of the special attributes like prepend, append , etc. to specify where you want the translated text to appear. More info on jquery i18next doc

Example on jsfiddle

Answer 2

I solved in this way:

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

The span tag does the trick, embedding the translated content.