Question

我正在尝试用jQuery实现一个非常简单的MUI。尝试了一些插件，但所有插件都在使用特定的ID，类名或数据属性更改标签内的语言。我需要通过{％translateme％}等短代码翻译界面。

我使用的HTML代码是：

<div>{%projects%}</div>
<input type="text" placeholder="{%tasks%}"/>
<div><a href="#" id="en">English</a> | <a href="#" id="fr">French</a></div>

我的jQuery是：

var english = {
  "projects": "Projects",
  "tasks": "Tasks",
};

var french = {
    "projects": "Projets",
  "tasks": "Tâches",
};

$(document).ready(function() {
    $("#en").click(function(){
            console.log('changeLanguage English');
        //changeLanguage function
    });
});
$(document).ready(function() {
    $("#fr").click(function(){
            console.log('changeLanguage French');
        //changeLanguage function
    });
});

默认情况下，如果可能，我需要加载英语。

请在这里找到关于jsFiddle的示例：https://jsfiddle.net/g1hpkphg/2/

非常感谢您的帮助。

Answer 1

您必须了解＆＃34;短代码＆＃34;只是简单的文本节点进入DOM，而不是一些可以替换的文本，就像它通常用于模板引擎一样。

由于存在这种差异，您需要定义一种方法来将这些可翻译的部分发现到DOM中，而对于DOM，最小的部分是一个节点。因此，使用一些节点（html标签是最容易找到的）来定义可翻译的文本将帮助您解决任务。例如，您可以尝试使用例如span具有data-属性的<span data-locale="projects">Projects</span>：$('[data-locale]').each(function(){ var $this = $(this); $this.text(locales[locale][$this.data('locale')]); })然后您就可以执行以下操作：

locales

在我的示例中，locale是一个对象，其中区域设置标识符作为键，本地化字符串作为值。 {{1}}是当前区域设置的标识符。与访问不同语言环境的不同变量相比，它更易于操作。

使用jQuery通过shortcode简单更改语言实现

1 个答案: