2014-11-26 9 views
1

Я создал языковой коммутатор с i18next js-решением. Каждый раз, когда я нажимаю на ссылку, чтобы изменить язык, новый язык отображается на секунду - тогда веб-сайт возвращается к языку, который установлен в функции init.i18next - языковой переключатель не работает должным образом

Кто-нибудь знает, как я могу это решить? Я думаю, что это имеет какое-то отношение к функции document(ready), но когда я удаляю это - ничего не работает:/

Спасибо!

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/i18next-1.7.4.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $.i18n.init(
     { 
      lng: 'en-US' 
     }, 
     function(t) { 
     // translate nav 
     $(".nav").i18n(); 
     }); 

     $('.changeLng').click(function() { 
     $.i18n.setLng("de-DE", function(t) { 
      $(".nav").i18n(); 
     }); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <a href="index.html?setLng=de-DE" class="changeLng">change to de</a> 
    <ul class="nav"> 
     <li> 
     <a href="#" data-i18n="nav.home"></a> 
     </li> 
     <li> 
     <a href="#" data-i18n="nav.page1"></a> 
     </li> 
     <li> 
     <a href="#" data-i18n="nav.page2"></a> 
     </li> 
    </ul> 
    </body> 
</html> 

ответ

1

Попробуйте этот код:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script type="text/javascript" src="js/i18next-1.7.4.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $.i18n.init(
     { 
      lng: 'en-US' 
     }, 
     function(t) { 
     // translate nav 
     $(".nav").i18n(); 
     }); 

     $('.changeLng').click(function() { 
     $.i18n.setLng("de-DE", function(t) { 
      $(".nav").i18n(); 
     }); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <a href="#" class="changeLng">change to de</a> 
    <ul class="nav"> 
     <li> 
     <a href="#" data-i18n="nav.home"></a> 
     </li> 
     <li> 
     <a href="#" data-i18n="nav.page1"></a> 
     </li> 
     <li> 
     <a href="#" data-i18n="nav.page2"></a> 
     </li> 
    </ul> 
    </body> 
</html> 

Когда вы нажмете на ссылку в вашей версии вы перезагрузки страницы, и язык получает значение 'EN-US' снова (поскольку функция document.ready снова вызвана). В этой версии страница не перезагружается, и поэтому меняется язык.

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