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>

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

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

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

Answer 1

~~您的选择器错误$("." + id).html(text);更改为$("#" + id).html(text);~~

我写这篇文章的时候一定很累。你显然是在那里定位一个不是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一样选择它。很简单，让我们告诉我们的ajax作为XML。早期版本的jQuery将XML作为ajax的默认版本，但让我们不要相信它并通过添加以下内容强制它为XML：dataType: "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);
        });
    });
});

现在应该专门解决您的问题。

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

这对您的使用可能有点过头但仍然很有趣

注意假设＆＃34; xmlDoc＆＃34;包含来自ajax或其他任何内容的xml文档。

然而，稍微改变一下，我们可以针对不同类型的元素（按类，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);
  });
});

这是自定义的小提琴（注意我使用了XML字符串并对其进行了解析） https://jsfiddle.net/MarkSchultheiss/z8qbsku4/

试图用jQuery改变语言

1 个答案:

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