主页 / 问题 / 783239
Accepted
user3178479
Asked:2020-02-11 02:54:17 +0000 UTC2020-02-11 02:54:17 +0000 UTC

在客户端更改语言 - JavaScript (jQuery)

  • 772

我想更改客户端页面上的语言。我遇到了一篇关于 Habré的文章，但那里不再有示例。

json 文件的内容与示例中的相同。

语言/eng.json

{
"hello_world":"Hello World",
"some_text":"Some Text"
}

语言/rus.json

{
"hello_world":"Привет Мир",
"some_text":"Некоторый текст"
}

示例中的功能代码：

var LANGUAGE;

$.redrawLanguage = function (lang) {
$.ajax({
url : 'languages/' + lang + '.json', //тянем файл с языком
dataType : 'json',
success : function (response) {
LANGUAGE = response; //записываем в глобальную переменную, а вдруг пригодиться
$('body').find("[lng]").each(function () //ищем все элементы с атрибутом
{
var lng = LANGUAGE[ $(this).attr('lng') ]; //берем нужное значение по атрибуту lng
var tag = $(this)[0].tagName.toLowerCase();
switch (tag) //узнаем название тега
{
case "input":
$(this).val(lng);
break;
default:
$(this).html(lng);
break;
}
});
}
});
}

在我的示例中，我想通过单击相应的 RU\EN 按钮来实现此翻译：

var LANGUAGE = false;
$.redrawLanguage = function (lang) {
  $.ajax({
    url : 'languages/' + lang + '.json', //тянем файл с языком
    dataType : 'json',
    success : function (response) {
      LANGUAGE = response; 
      $('body').find("[lng]").each(function () {
        var lng = LANGUAGE[ $(this).attr('lng') ]; 
        var tag = $(this)[0].tagName.toLowerCase();
        
        console.log(response + ' ' + lng);
        
        
        switch (tag) {
          case "input":
            $(this).val(lng);
            break;
            default:
            $(this).html(lng);
          break;
        }
      });
    }
  });
}

$.getLanguage = function (key) {
  if (typeof(LANGUAGE[key]) != 'undefined') {
    return LANGUAGE[key]; 
  }
  return key; 
}

$('#ru').on('click', function(e){
  e.preventDefault();

  var
    $this = $(this);

    $.redrawLanguage('eng');

});

$('#en').on('click', function(e){
  e.preventDefault();

  var
    $this = $(this);

    $.redrawLanguage('rus');

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<menu>
  <a href="#" class="link" id="ru">RU</a>
  <a href="#" class="link" id="en">EN</a>
</menu>

<p lng="rus">
  Привет Мир
  Некоторый текст
</p>

但是什么也没有发生，没有错误和 json - 状态 200。

console.log(response + ' ' + lng);- 显示[object Object] undefined

如何通过单击按钮在页面上开始翻译，我做错了什么？与函数一样$.getLanguage，如何使用它，

将需要以便能够在任意位置使用 javascript 在当前语言中取出所需的行，

?

javascript

1 个回答

  1. Best Answer

    html- 中的错误<p lng="rus">，您需要使用的不是语言，而是键 - <p lng="hello_world">，并且该函数已使用适当的所需语言（所需 json 文件的名称）调用 -$.redrawLanguage('eng');或$.redrawLanguage('rus');

    var LANGUAGE = false;
$.redrawLanguage = function (lang) {
  $.ajax({
    url : 'languages/' + lang + '.json', //тянем файл с языком
    dataType : 'json',
    success : function (response) {
      LANGUAGE = response; 
      $('body').find("[lng]").each(function () {
        var lng = LANGUAGE[ $(this).attr('lng') ]; 
        var tag = $(this)[0].tagName.toLowerCase();

        switch (tag) {
          case "input":
          $(this).val(lng);
          break;
          default:
          $(this).html(lng);								
          break;
        }
      });


    }
  });
}

$.getLanguage = function (key) {
  if (typeof(LANGUAGE[key]) != 'undefined') {
    return LANGUAGE[key]; 
  }
  return key; 
}


$('#ru').on('click', function(e){
  e.preventDefault();

  var
    $this = $(this);

    $.redrawLanguage('eng');

});

$('#en').on('click', function(e){
  e.preventDefault();

  var
    $this = $(this);

    $.redrawLanguage('rus');
    console.log($.getLanguage('hello_world') );
    console.log($.getLanguage('some_text') );

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<menu>
  <a href="#" class="link" id="en">RU</a>
  <a href="#" class="link" id="ru">EN</a>
</menu>

<p lng="hello_world">
  Привет Мир		
</p>

<p lng="some_text">
  Некоторый текст
</p>



<p lng="hello_world">
  Hello World
</p>



<p lng="some_text">
  Some Text
</p>

    • 3

相关问题