尝试使用 jQuery 更改语言

Question

我正在关注 this tutorial，其中概述了使用 jQuery 使网站多语言的简单方法。首先，我非常精通 HTML/CSS 和 PHP/MySQL，但是我才刚刚开始使用 JavaScript。

我花了一些时间在网上搜索，但找不到我的代码有问题。这是我的。

我的 HTML 代码如下所示：

<h5 class="info-text">Be notified when we launch.</h5>

根据教程，我的 XML 看起来像这样：

<?xml version="1.0" encoding="UTF-8"?>
    <translations>
   <translation id="info-text">
    <english>Be notified when we launch</english>
    <spanish>notificar cuando tu lanza</spanish>
   </translation>
    </translations>

（对不起，我的西班牙语不是很好。但这仅用于测试目的）。

我的 jQuery 脚本如下所示：

<script type="text/javascript" language="javascript">
$(function() {
    var language = 'english';
    $.ajax({
        url: 'includes/languages.xml',
        success: function(xml) {
            $(xml).find('translation').each(function(){
                var id = $(this).attr('id');
                var text = $(this).find(language).text();
                $("." + id).html(text);
            });
        }
    });
});
</script>

我确实在 header 中包含了 jQuery 文件，如下所示：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>

不确定我做错了什么。任何帮助将非常感激。谢谢。

Answer 1

~~你的select或者是错误的$("." + id).html(text);改成$("#" + id).html(text);~~

好吧，我写那个的时候一定很累。您显然是针对 class 而不是那里的 ID。很抱歉浪费了时间。

现在解决手头的问题。

让我们假设您的标记是（源自您的）

<h5 class="info-text">put stuff here.</h5>
<h5 class="charlie">charlie.</h5>
<h5 id="walt">walt.</h5>

而我们的 XML 是（也在您的表格中，但更多）：

  <?xml version="1.0" encoding="UTF-8"?>
  <translations>
    <translation id="info-text">
      <english>Be notified when we launch</english>
      <spanish>notificar cuando tu lanza</spanish>
    </translation>
    <translation id="walt">
      <english>Be notified when we launch for walt</english>
      <spanish>notificar cuando tu lanza for walt</spanish>
    </translation>
    <translation id="charlie">
      <english>Be notified when we launch for charlie</english>
      <spanish>notificar cuando tu lanza for charlie</spanish>
    </translation>
  </translations>

然后我们必须解决 XML 和 通过 ajax.

检索的问题

为了声明手头的任务，我们希望根据一种语言替换页面上元素的文本（参见上面的标记），这些文本与我们传入的 XML 指向的元素相匹配（来自 ajax) 通过指向页面元素的属性。

这样看来您的代码非常接近，但 ajax 中的 XML 可能有问题。它必须是 XML 而不是文本（字符串）类型，以便像您所做的那样使用 jQuery select 它。很简单，让我们的 ajax 像 XML 一样拉。 jQuery 的早期版本将 XML 作为 ajax 的默认值，但我们不要相信它并通过添加 dataType: "xml",[=21 来强制它成为 XML =]

$(function() {
    var language = 'english';
    $.ajax({
        url: 'includes/languages.xml',
        dataType: "xml"
    }).done(function(xml) {
        $(xml).find('translation').each(function(){
            var id = $(this).attr('id');
            var text = $(this).find(language).text();
            $("." + id).html(text);
        });
    });
});

现在应该可以具体解决您的问题了。

自定义只是因为我很感兴趣，但是一个有用的练习

这对您的使用来说可能有点矫枉过正，但仍然很有趣

注意假设 "xmlDoc" 包含来自 ajax 或其他的 xml 文档。

然而，通过一些细微的更改，我们可以针对不同类型的元素（通过 class、id 等）。

HTML 自定义：

<div id="container">
  <h5 id="info-text">put stuff here.</h5>
  <h5 class="charlie">charlie.</h5>
  <h5 mycustom="bill">bill.</h5>
  <h5 class="bill">bill.</h5>
  <h5 id="walt">walt.</h5>
  <h5 id="walter">walter custom.</h5>
</div>

自定义xml:

<?xml version="1.0" encoding="UTF-8"?>
<translations>
  <translation id="info-text">
    <english>Be notified when we launch</english>
    <spanish>notificar cuando tu lanza</spanish>
  </translation>
  <translation id="walt" custom="[id=walter]">
    <english>Be notified when we launch for walt</english>
    <spanish>notificar cuando tu lanza for walt</spanish>
  </translation>
  <translation id="charlieidthing" class="charlie">
    <english>Be notified when we launch for charlie</english>
    <spanish>notificar cuando tu lanza for charlie</spanish>
  </translation>
  <translation customAttribute="mycustom,bill" targetclass="bill">
    <english>Be notified when we launch for bill</english>
    <spanish>notificar cuando tu lanza for bill</spanish>
  </translation>
</translations>

这里是 自定义代码 来处理所有这些：

var language = "spanish";
function decodeSelector(encoded) {
  var elem = document.createElement('textarea');
  elem.innerHTML = encoded;
  var decoded = elem.value;
  return decoded;
}

function getSelector(attr) {
  var xType = attr.localName;
  var xSelect = attr.nodeValue;
  // here we match the custom attributes in the markup/enhance as needed
  switch (xType) {
    // class either in class or targetclass attributes
    case "class":
    case "targetclass":
      xSelect = "." + xSelect;
      break;
    // id in id or targetid attributes
    case "id":
    case "targetid":
      xSelect = "#" + xSelect;
      break;
    // some custom attribute with a name,value content pair
    // example in XML: customAttribute="mycustom,bill"
    case "customAttribute":
      var s = xSelect.split(",");
      xSelect = "[" + s[0] + "='" + decodeSelector(s[1]) + "']";
      break;
    // some encoded selector (any jQuery selector)
    case "custom":
      xSelect = decodeSelector(xSelect);
      break;
    // used to ignore other attributes
    default:
      xSelect = "";
      break;
  }
  return xSelect;
}

function setTarget(targetPick, languageText) {
  var attrs = targetPick.attributes;
  for (var j = 0; j < attrs.length; j++) {
    var xSelect = getSelector(attrs[j]);
    if (xSelect) {
      var target = $(xSelect);
      //  target.css('background-color', 'pink'); you can do this also
      target.text(languageText);
    }
  }
}

现在处理它（这在文档中已准备就绪，但 应该在您的 ajax 中完成 ）：

$(function() {
  $(xmlDoc).find('translation').each(function() {
    var targetTranslation = $(this).find(language);
    var text = targetTranslation.text();
    setTarget(this, text);
  });
});

这是自定义的 fiddle（注意我使用了 XML 字符串并解析了它） https://jsfiddle.net/MarkSchultheiss/z8qbsku4/

尝试使用 jQuery 更改语言

Trying to Change Language with jQuery

html

javascript

multilingual

jquery

自定义只是因为我很感兴趣，但是一个有用的练习