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

Question

对不起,如果这个问题的标题非常通用.我真的无法为我的问题制定逻辑.

作为概述,我正在做一个包含多种语言的登录页面,KO,SC,TC,JP是具体的.此着陆页是一个下载页面.所以你可以想象它有正常的字段,如姓名,电子邮件地址,国家和公司名称.

我已经制定了英文标签.逻辑是,我将依赖于字段标签中的更改为参数.防爆.site.com?lang=sc将显示SC字段标签.

我的基本方法是:

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

它适用于所有人.但是,我有15个字段加上4种语言.所以就像我需要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>