我想翻译我的 HTML 文本

Question

我想翻译我网站上的文本我使用了这段代码，我知道我即将获得正确的解决方案。

我的 HTML 代码中的某处：

 <ul class="nav navbar-nav navbar-right">
        <li><a href="#about" data-translate="menu.about">A PREPOS</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#pricing">PRICING</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li>&nbsp;&nbsp;&nbsp;</li>
        <li ><a class="lang">FR</a></li>
        <li ><a class="lang">EN</a></li>
 </ul>

这是我的 JavaScript 代码：

var dictionary, set_lang;


// Object literal behaving as multi-dictionary
dictionary = {
    "fr": {
        "menu" : {
            "about": "à propos",
            "services": "services"
        }
    },
    "en": {
        "menu" : {
            "about": "about",
            "services": "services"
        }
    }
};

// Function for swapping dictionaries
set_lang = function (dictionary) {
    $("[data-translate]").text(function () {
        var key = $(this).data("translate");
        if (dictionary.hasOwnProperty(key)) {
            console.log(dictionary[key]);
            return dictionary[key];
        }
    });
};

// Swap languages when menu changes
$(".lang").click(function() {
    var language = $(this).html().toLowerCase();
    console.log(language);
    if (dictionary.hasOwnProperty(language)) {
        set_lang(dictionary[language]);
    }
});

// Set initial language to French
set_lang(dictionary.fr);

});

在这部分：

<li><a href="#about" data-translate="menu.about">A PREPOS</a></li>

无法翻译文本 'A PREPOS'，但当我将其更改为：

<li><a href="#about" data-translate="menu">A PREPOS</a></li>

我可以使用 console.log

看到我的对象 'menu'

Answer 1

您的问题是您对 dictionary.hasOwnProperty("menu.about") returns 的调用是错误的。

您需要遍历对象树，这样您才能得到属性：

dictionary["menu"]["about"]

我整理了一个关于如何遍历对象树的简单递归示例。

// Object literal behaving as multi-dictionary
dictionary = {
  "fr": {
    "menu": {
      "about": "à propos",
      "services": "services"
    }
  },
  "en": {
    "menu": {
      "about": "about",
      "services": "services"
    }
  }
};

// Function for swapping dictionaries
set_lang = function(dictionary) {
  $("[data-translate]").text(function() {
    var key = $(this).data("translate");
    return parseSubObject(dictionary, key);
  });
};

function parseSubObject(obj, str) {
  var props = str.split(".");
  
  var thisProp = props.shift();
  if (obj.hasOwnProperty(thisProp)) {
    if (props.length == 0) {
      return obj[thisProp];
    } else {
      return parseSubObject(obj[thisProp], props.join('.'));
    }
  } else {
    return null;
  }
}

// Swap languages when menu changes
$(".lang").click(function() {
  var language = $(this).text().toLowerCase();
  if (dictionary.hasOwnProperty(language)) {
    set_lang(dictionary[language]);
  }
});

// Set initial language to French
set_lang(dictionary.fr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-right">
  <li><a href="#about" data-translate="menu.about">A PREPOS</a></li>
  <li><a href="#services">SERVICES</a></li>
  <li><a href="#portfolio">PORTFOLIO</a></li>
  <li><a href="#pricing">PRICING</a></li>
  <li><a href="#contact">CONTACT</a></li>
  <li>&nbsp;&nbsp;&nbsp;</li>
  <li><a class="lang">FR</a></li>
  <li><a class="lang">EN</a></li>
</ul>

Answer 2

你假设 dictionary.fr.menu.about (à propos) 与 dictionary.fr['menu.about'] (undefined ).

注意dictionary.fr.menu.about各段数据结构：

dictionary: 对象
dictionary.fr: 对象
dictionary.fr.menu: 对象
dictionary.fr.menu.about: 字符串

为了获取字符串，您需要遍历对象，您可以使用以下代码：

set_lang = function(dictionary) {
  $("[data-translate]").text(function() {
    var key = $(this).data("translate").split('.'),
        val = dictionary[key.shift()];

    while(key.length) {
      val = val[key.shift()];
    }
    return val;
  });
};

片段：

var dictionary, set_lang;


// Object literal behaving as multi-dictionary
dictionary = {
  "fr": {
    "menu": {
      "about": "à propos",
      "services": "services"
    }
  },
  "en": {
    "menu": {
      "about": "about",
      "services": "services"
    }
  }
};

// Function for swapping dictionaries
set_lang = function(dictionary) {
  $("[data-translate]").text(function() {
    var key = $(this).data("translate").split('.'),
        val = dictionary[key.shift()];
    
    while(key.length) {
      val = val[key.shift()];
    }
    return val;
  });
};


// Swap languages when menu changes
$(".lang").click(function() {
  var language = $(this).html().toLowerCase();
  console.log(language);
  if (dictionary.hasOwnProperty(language)) {
    set_lang(dictionary[language]);
  }
});

// Set initial language to French
set_lang(dictionary.fr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-right">
  <li><a href="#about" data-translate="menu.about">A PREPOS</a></li>
  <li><a href="#services">SERVICES</a></li>
  <li><a href="#portfolio">PORTFOLIO</a></li>
  <li><a href="#pricing">PRICING</a></li>
  <li><a href="#contact">CONTACT</a></li>
  <li>&nbsp;&nbsp;&nbsp;</li>
  <li><a class="lang">FR</a></li>
  <li><a class="lang">EN</a></li>
</ul>

Answer 3

你的 dictionary 逻辑完全不对。 services 即：永远是服务，没有充分的理由使用额外的 menu 层。应避免冗余和重复。
而是使用 properties，例如：

var dictionary = { // props in alphabetical order ok? promise?
  // prop   : {fr, en}
  about     : {fr:"à propos", en:"about"},
  services  : {fr:"services", en:"servicesssss"}
};

function translate( lan ) {

  $("[data-translate]").text(function(){

    var data = this.dataset.translate.split("|");
    var prop = data[0];  // the dictionary property name
    var style = data[1]; // "uppercase", "lowercase", "capitalize"

    if(!prop in dictionary) return console.error("No "+ prop +" in dictionary");

    var trans =  dictionary[prop][lan]; // The translated word

    // Do we need to apply styles?
    if(style==="capitalize"){
       trans = trans.charAt(0).toUpperCase() + trans.slice(1);
    } else if(style==="uppercase"){
       trans = trans.toUpperCase();
    } else if( style==="lowercase"){
       trans = trans.toLowerCase();
    }

    return trans;
  });
}

// Swap languages when menu changes
$("[data-lang]").click(function() {
  translate( this.dataset.lang );
});

// Set initial language to French
translate("fr");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav navbar-nav navbar-right">
  <li><a href="#about" data-translate="about|uppercase">A PREPOS</a></li>
  <li><a href="#services" data-translate="services|uppercase">SERVICES</a></li>
  <li>&nbsp;&nbsp;&nbsp;</li>
  <li><a data-lang="fr">FR</a></li>   <!-- data-* attributes can be helpful -->
  <li><a data-lang="en">EN</a></li>
</ul>

我想翻译我的 HTML 文本

I want to translate my HTML text

html

javascript

json

translate