javascript - 如何轻松地将内部 html 应用于多个元素？

Question

抱歉，如果这个问题的标题很笼统。我真的无法为我的问题制定逻辑。

作为概述，我正在制作一个包含多种语言的着陆页，具体来说，包括 KO、SC、TC、JP。此登录页面是一个下载页面。因此，您可以想象它具有姓名、电子邮件地址、国家/地区和公司名称等常规字段。

我已经准备好英文标签了。逻辑是，我将把字段标签的变化依赖于一个参数。前任。 site.com?lang=sc 将显示 SC 字段标签。

我的基本做法是这样的:

if(lang == "sc") { $("#lblFirstName").html("SC Value"); }

它适用于所有人。但是，我有 15 个字段和四种语言。所以就像我需要 lang 上的四个条件和 15 个内部 HTML。

关于如何使用最少的代码行更新每个标签，是否有任何捷径？

任何想法/建议将不胜感激。 谢谢!

Answer 1

首先将您的翻译保存在此对象结构中:

{
    'lang' => {'key1' => 'translation1', ...},
    'lang2' => {'key1' => 'translation1', ...},
    ...
}

比循环您的对象并翻译键指示字段。

var translations = {
  'en': {
    'first-value': 'EN value', 'title': 'Some title'
  },
  'sc': {
    'first-value': 'SC value', 'title': 'AbraKadabra'
  }
}

function doTranslate(lang) {
  $.each(translations[lang], function(key, value) {
    $('[data-t-' + key + ']').text(value);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onChange="doTranslate($(this).val())">
  <option value="en">EN</option>
  <option value="sc">SC</option>
</select>
<hr/>
<span data-t-title>Some title</span> | 
<span data-t-first-value>EN value</span>