Question

使用i18next.js Trasnslation与jquery完美配合，我希望使用普通的Javascript，

这是我的代码

    <!DOCTYPE html>
<html>
  <head>
    <title>Multi Language</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/css/topcoat-mobile-light.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/1.6.3/i18next-1.6.3.js"></script>
    <script>
      i18n.init({lng: "en"}, function(err, t) {
        setLan(t);
      });
      function changeLang() {
        var e = document.getElementById("selLn");
        var lng = e.options[e.selectedIndex].value;
        console.log(lng);
        i18n.setLng(lng, function(err, t) {
          setLan(t);
        });
        $('#lbl').html("loaded Language package : /locales/" + lng + "/translation.json");
      }
      function setLan(t) {

        $(".nav").i18n();
        $(".content").i18n();
        var appName = t("app.name");
        console.log(navigator.language);
      }
    </script>
  </head>
  <body >

    <div class="topcoat-navigation-bar">
      <div class="topcoat-navigation-bar__item center full">
        <h1 class="topcoat-navigation-bar__title">Multi Language Demo</h1>
      </div>
    </div>
    Select Language
    <select id="selLn" onchange="changeLang()" class="topcoat-select">
      <option value="en">English</option>
      <option value="fr">French</option>
      <option value="sp">Spanish</option>
      <option value="ar">Arabic</option>
      <option value="hi">Hindi</option>
      <option value="ml">Malayalam</option>
      <option value="ka">Kannada</option>
    </select>
    <div class="topcoat-list">
      <ul class="nav topcoat-list__container" >
        <li class="topcoat-list__item"><a href="#" data-i18n="nav.home"></a></li>
        <li class="topcoat-list__item"><a href="#" data-i18n="nav.products"></a></li>
        <li class="topcoat-list__item"><a href="#" data-i18n="nav.services"></a></li>
      </ul>
    </div>
    <div class="content">
      <h1 data-i18n="content.welcome"></h1>
    </div>

    <label id="lbl" style="font-style: italic;
           padding-left: 12px;"></label>
  </body>
</html>

法语的翻译文件 locales / fr / translation.js

{
  "app": {
    "name": "i18next"
  },
  "nav": {
    "home": "domicile",
    "products": "produits",
    "services": "services"
  },
  "content":{
      "welcome":"De rien"
  }
}

我试图替换 $(".nav").i18n(); document.querySelector(".nav").i18n(); <script src="jquery-2.1.4.min.js" type="text/javascript"></script> 并删除了roslyn

但它不起作用

我的问题： 是i18next Jquery依赖库吗？ 我可以不使用jquery吗？ 因为我在他们的网站上只看到了Jquery示例代码。希望有人能回答

Answer 1

是的，当你想使用DOM元素时，它依赖于jQuery，你只能使用jQuery（和Zepto）。但是，当您只想翻译单个字符串时，可以在没有jQuery的情况下使用它。

Answer 2

我没有使用过i18next，但根据文档，您可以尝试：

app.customers

如果你想使用数据attr，你可能只需编写简单的包装来处理它。

Answer 3

我不想坚持JQuery而且自然$(".blabla").i18n();，而不是我用过;

var i18nList = document.querySelectorAll('[data-i18n]');
            i18nList.forEach(function(v){
                v.text = window.i18next.t(v.dataset.i18n);
            })

它挑选出所有拥有＆＃34; data-i18n ＆＃34; html上的属性并通过该属性的值替换文本，该属性也是i18next JSON文件的关键。

此代码只有一个问题，＆＃34; querySelectorAll＆＃34;真正的旧浏览器不支持。您可以查看here。

但现代浏览器的代码会更快。

如何在没有Jquery的情况下使用i18next

3 个答案: