Javascript 仅使用JQuery处理多语言

我在我的web应用程序中使用JQuery，我想知道在这种情况下处理多语言的最佳方式是什么。
我正在考虑创建一个文件，如：

label["login"]["fr"]="Connection"
label["login"]["en"]="Login"

加载文件后，我将（针对每个标签）执行以下操作：

在HTML中，我将使用：

<a href="login.html"><span id="login"></span></a>

---

这是正确的方法吗？

如果您关闭了

标记：-），则是正确的。您也可以只给

适当的“id”值

像这样的方案对于一个非常小的网站来说是可行的，但是一旦你有了许多页面、许多表单和许多消息，就很难跟踪消息了。您可能希望研究一种模板化解决方案，以便将数据合并到国际化消息（数量、日期等）中

---

当然，有一个问题是，禁用JavaScript的查看者只会得到服务器提供的默认语言。

我认为最好使用类和一个虚构的属性而不是id来控制多语言，因为如果在同一页面中有相同的文本两次，id会破坏它，因为它是唯一的

您可以尝试以下方法：

$(function() {
  $(".is_ml").each(function() {
    $(this).html(label[$(this).attr("ml_label")]["en"])
  })

});

例如，任何多语言文本都必须有class=“is\u ml”和ml\u label=“label”，其中标签可以是“login”。你知道我的方法了吗？

向吕克致敬

我认为最好的方法是在某种后端完成：p 但是，既然您要求使用jQuery版本，我会使用HTML中使用最多的语言，并用其他语言替换它。我会这样做：

此处演示： （单击fr或de更改语言）

---

我想我会懒得用语言来维护这些对象，所以我会在我想翻译的元素上使用一个语言类。。。（正如我在这里所做的：）

我喜欢Bernardo Mendes方法（答案#6），但是，由于需要初始化子对象，因此最好切换ml#U标签和语言字段，以将必须初始化的子对象数量减至每种语言只有一个

Javascript:

var label = {};
label['fr'] = {};
label['en'] = {};

label["fr"]["login"]="Connection";
label["en"]["login"]="Login";
label["fr"]["firstname"]="Prénom";
label["en"]["firstname"]="First Name";
label["fr"]["lastname"]="Nom de Famille";
label["en"]["lastname"]="Last Name";

$(function() {
  $(".is_ml").each(function() {
    $(this).html(label["en"][$(this).attr("ml_label")])
  })
});

HTML:

登录
名字
姓

实际上是OP的方式，如果禁用JS，将根本没有文本。@Davy8是的，这是真的-我假设OP会看到他的方式的错误，并包括服务器的默认设置：-）禁用javascript的人仍然存在吗？：）听起来不错，但是如果我使用几个h1呢？我需要单独维护每个h1吗？您不必单独维护它们，您只需调整选择器即可。在我的示例中，您可以将“div h1”更改为“h1”，这样它将转换页面上的所有h1是的，好的，而不是h1，我可以使用h1.title1，h1.title2。。。好的it@bernardo-门德斯，是的，我明白了！这似乎是一个很好的方法，我来试试。干杯

var translation, translate;

translation = { //store your translations in a object.
    "fr": {
        "div > a:eq(0)": "un lien", // this way you are flexible (don't need to use abd id for all you contents you want to translate)
        "div h1"       : "un title",
        "p"            : "du contenu"
    },
    "de": {
        "div > a:eq(0)": "ein Link",
        "div h1"       : "ein Titel",
        "p"            : "eigen Inhalt"
    }
}

translate = function( lng,translationObj ){ //check if lng is provided and if it acually exists in the object.
    if( lng && translationObj[lng] ) {
        return $.each(translationObj[lng], function(k,v){
             $(k).text(v); 
        });
    }else{
        return $.error("make the language (lng) exists in your object");
    }
}

translate("fr", translation);

var label = {};
label['fr'] = {};
label['en'] = {};

label["fr"]["login"]="Connection";
label["en"]["login"]="Login";
label["fr"]["firstname"]="Prénom";
label["en"]["firstname"]="First Name";
label["fr"]["lastname"]="Nom de Famille";
label["en"]["lastname"]="Last Name";

$(function() {
  $(".is_ml").each(function() {
    $(this).html(label["en"][$(this).attr("ml_label")])
  })
});

<label class="is_ml" ml_label="login">Login</label>
<label class="is_ml" ml_label="firstname">First Name</label>
<label class="is_ml" ml_label="lastname">Last Name</label>