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

Question

使用 i18next.js Transnslation 与 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>

但它不起作用

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

Answer 1

是的，当您想使用 DOM 元素时，它依赖于 jQuery，您只能将其与 jQuery（和 Zepto）一起使用。但是，当您只想翻译单个字符串时，可以不使用 jQuery.

Answer 2

我没用过 i18next，但是根据文档，你可以试试：

var x = i18n.t("key");
document.querySelector(".nav").innerHTML = x;

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

Answer 3

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

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

它正在挑选 html 上具有“data-i18n”属性的所有 DOM 元素并通过该属性的值替换文本，该属性也是 i18next JSON 文件的关键。

此代码可能只有一个问题，"querySelectorAll" 不被非常非常旧的浏览器支持。你可以查看一下here.

但代码在现代浏览器上会更快。

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

How to use i18next without Jquery

javascript

jquery

i18next