静态 HTML - 使用 jquery.i18n.js 的本地化不起作用

Question

我尝试进行一个简单的 HTML 测试，其中内容将使用 jquery.i18n.js 库翻译成特定语言。它部分起作用，意味着正在加载默认（英语）文本，但没有加载语言开关。

我的jsfiddle在这里： https://jsfiddle.net/g8uwotsx/12/

HTML代码：

<header>
  <nav>
                <ul class="switch-locale">
              <li><a class="dropdown-item" href="#" data-locale="en">EN</a></li>
              <li><a class="dropdown-item" href="#" data-locale="pl">PL</a></li>
              <li><a class="dropdown-item" href="#" data-locale="fr">FR</a></li>             
              <li><a class="dropdown-item" href="#" data-locale="de">DE</a></li>
              <li><a class="dropdown-item" href="#" data-locale="it">IT</a></li>
              <li><a class="dropdown-item" href="#" data-locale="es">ES</a></li>
              <li><a class="dropdown-item" href="#" data-locale="ru">RU</a></li>
            </ul>
  </nav>
</header>

<div class="container">
  <div class="row">
    <div class="col text-center">
      <h1 data-i18n="app-title">placeholder</h1>
    </div>
  </div>
</div>

JS代码：

jQuery(function() {
$.i18n().load( {
        'en': {
          'app-title': 'english headline'
        },
        'it': {
          'app-title': 'italian headline'
        },
        'es': {
          'app-title': 'spanish headline'
        }
      }).done(function() {
          $('.switch-locale').on('click', 'a', function(e) {
            e.preventDefault();
            $.i18n().locale = $(this).data('locale');
          });
        });
  
      
$('body').i18n(); 
});


    
    

CSS代码：

.switch-locale li {
  display:inline-block;
  list-style-type:none;
  text-align:center;
}

.switch-locale {
  text-align:center;
  border-bottom:1px solid grey;
}

灵感来自官方文档和此链接： https://phrase.com/blog/posts/jquery-i18n-the-advanced-guide/

预期的行为是：

• 默认情况下用户只能看到英文文本
• 通过菜单更改语言后，文本将替换为本地语言

在这个例子中，我使用的解决方案没有每个语言单独的 json 文件（在最后一个例子中，我想这样做）

问题：

• 文本仅以英文显示
• 尽管点击了不同的语言，但文本并未翻译

Answer 1

您应该切换全局区域设置：

$.data( document, 'i18n' ).locale = 'de'