Как использовать i18next без Jquery

С i18next.js Trasnslation прекрасно работает с JQuery, я хочу использовать его с простой Javascript,Как использовать i18next без Jquery

вот мой код

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

Перевод файла для Французскийлокали/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 на своем сайте. надеюсь кто-то может ответить

источник

2015-08-29 rashidnk

Нет, i18next не зависит от jQuery. Чтобы использовать его без jQuery, прочитайте документацию. http://i18next.com/pages/doc_features.html –

@ Иордан может предложить, какую модификацию мне нужно сделать для приведенного выше кода кода – rashidnk

Да, если вы хотите работать с элементами DOM, это зависит от jQuery, вы можете использовать его только с jQuery (и Zepto). Однако, когда вы просто хотите перевести отдельные строки, вы можете использовать его без jQuery.

источник

2015-08-29 05:12:21 redelschaap

, что не совсем верно. Вы все равно можете получить переведенную строку и заменить ее самостоятельно. – nevermind

Я не использовал i18next, но в соответствии с Документами, вы можете попробовать:

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

Если вы хотите использовать Аттрибут данных, вы, вероятно, нужно будет только писать простые обертки для обработки этого.

источник

2015-08-29 05:35:42 nevermind

Я не хотел придерживаться JQuery и, естественно, $(".blabla").i18n();, вместо этого я использовал;

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

это собирание всех элементов DOM, который имеет «данных-i18n» атрибут HTML и заменить текст через значение этого атрибута, который также является ключевым для i18next файла JSON.

С этим кодом может быть только одна проблема, «querySelectorAll» не поддерживается действительно действительно старыми браузерами. Вы можете проверить его here.

Но в современных браузерах код будет более быстрым.

источник

2016-10-14 00:33:42

ответ

Смежные вопросы