0

我在小提琴上做给定的例子。它在小提琴上不起作用我想使用 i18next 。所以当用户更改语言时我的文本会改变所以我找到了这个解决方案 https://github.com/tabacha/javascript-i18n -例子

在小提琴上使用它。我将所有 js 放在 Dropbox 中并在外部资源中使用该链接，但该功能对我不起作用。这是我的小提琴

http://jsfiddle.net/dWq4E/1/

var text = document.getElementById("text").firstChild,
 title = document.getElementById("title").firstChild,
 instruction1 = document.getElementById("instruction1").firstChild,
 instruction2 = document.getElementById("instruction2").firstChild,
 num = document.getElementById("num"),
 lang = document.getElementById("lang");

i18n.init(function(t) {


title.nodeValue = i18n.t("title");
text.nodeValue = i18n.t("ball", { count: 2 });
instruction1.nodeValue = i18n.t("chooser.ball");
instruction2.nodeValue = i18n.t("chooser.lang");

});
num.onchange = function (e) {
  var t =i18n.t("ball", { count: parseInt(num.value) });
  text.nodeValue=t;

};

lang.onchange = function (e) {
   i18n.setLng(lang.value);
};
4

1 回答 1

0

为什么代码不起作用，您有一些问题。弄清楚发生了什么的最好方法是查看控制台。在您的浏览器中，按 F12 以获取开发人员工具。Chrome/Firefox 和 IE10+ 拥有最好的工具。

第一个问题是 Dropbox 不是托管 Web 文件的好地方。当您对该文件发出请求时，它实际上是返回所有 html 以呈现页面，如果您转到 url 则可以看到它。所以它不是有效的 JavaScript。您确实需要一些适当的网络空间来测试它，或者您可以使用网络服务器（IIS、Apache、XAMP 等）在本地进行

错误

HTML 中没有 id 为“text”或“title”的元素，因此 fordocument.getElementById("text").firstChild和title = document.getElementById("title").firstChild返回 null 的代码，这意味着稍后设置 i18n 文本的代码失败。

最接近我可以让他在jsFiddle DEMO中工作但我无法在我的托管空间上设置 Access-Control-Allow-Origin 标头以允许跨站点 json 请求。

我的主机上有一个演示页面供您查看它的工作原理：http ://www.forward-slash.co.uk/demo/i18ntest.htm

HTML：

<p id="text">Should be set by js</p>
<p id="title">Should be set by js</p>
<p id="instruction1">Should be set by js</p>
<input id="num" type="text" size="5" maxlength="5" value="2" />
<p id="instruction2">Should be set by js</p>
<select id="lang" size="1">
    <option>select language</option>
    <option value="de">German</option>
    <option value="en">English</option>
</select>

JavaScript：

// location of the translation files go here
i18n.init({ resGetPath: '/lib/__ns__-__lng__.json.txt' });

var text = document.getElementById("text").firstChild,
    title = document.getElementById("title").firstChild,
    instruction1 = document.getElementById("instruction1").firstChild,
    instruction2 = document.getElementById("instruction2").firstChild,
    num = document.getElementById("num"),
    lang = document.getElementById("lang");

i18n.init(function(t) {
    title.nodeValue = i18n.t("title");
    text.nodeValue = i18n.t("ball", { count: 2 });
    instruction1.nodeValue = i18n.t("chooser.ball");
    instruction2.nodeValue = i18n.t("chooser.lang");
});

num.onchange = function (e) {
  var t =i18n.t("ball", { count: parseInt(num.value) });
  text.nodeValue=t;
};

lang.onchange = function (e) {
   i18n.setLng(lang.value);
   // it appears the above sets a language cookie with the selected language
   // we can refresh the page for the correct translations, but e need to put in
   // a bit of a delay to allow the cookie to be set
   setTimeout("location.reload(true);",500);;
};
于 2013-11-23T04:57:23.803 回答