Fatal编程技术网
  • javascript/
  • Javascript 如何在没有Jquery的情况下使用i18next

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

javascript jquery

Javascript 如何在没有Jquery的情况下使用i18next,javascript,jquery,i18next,Javascript,Jquery,I18next,有了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/top

有了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>
我试着替换 
$（“.nav”）.i18n（）与
document.querySelector（“.nav”）.i18n（）一起使用
并删除了

但它不起作用

我的问题:
i18next是依赖Jquery的库吗？
没有jquery我不能使用它吗？

因为我在他们的网站上只看到了Jquery示例代码。希望有人能回答
是的，当您想要使用DOM元素时，它依赖于jQuery，您只能将它与jQuery（和Zepto）一起使用。但是，当您只想翻译单个字符串时，可以在不使用jQuery的情况下使用它。
我没有使用i18next，但根据文档，您可以尝试：


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



如果您想使用数据属性，您可能只需要编写简单的包装来处理它。
我不想坚持使用JQuery，自然地，
$（“.blablabla”）.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”不受真正较旧的浏览器支持。你可以查一下


但是在现代浏览器上，代码速度会更快。
不，i18next不依赖于jQuery。要在没有jQuery的情况下使用它，请阅读文档@Jordan你能建议我需要对上面的示例代码做什么修改吗。您仍然可以获得一个已翻译的字符串并自己替换它。

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