jquery - 语言切换 - 使用 HTML 而不是 Key

Question

我之前看到一个关于如何使用 Json 创建多语言网站的优秀论坛 (Build multiple language website using jQuery and JSON based methods)。

我想看看是否可以使用它，但不使用 key 属性，而是使用普通的 HTML。请参阅代码笔:- https://codepen.io/scottYg55/pen/ZEzpOpm

我可以看到在 jQuery 中调用了 key :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="translate" id="en-gb">English</button>
<button class="translate" id="zh-tw">Chinese</button>

<ul>
  <li class="lang" key="HOME"></li>
  <li class="lang" key="ABOUT"></li>
  <li class="lang" key="CONTACT"></li>
  <li class="lang">Home</li>
</ul>

var arrLang = {
  "en-gb": {
    "HOME": "Home",
    "ABOUT": "About Us",
    "CONTACT": "Contact Us",
  },
  "zh-tw": {
    "HOME": "首頁",
    "ABOUT": "關於我們",
    "CONTACT": "聯絡我們",
  }
};

// The default language is English
var lang = "en-gb";

// Check for localStorage support
if ('localStorage' in window) {
  var usrLang = localStorage.getItem('uiLang');
  if (usrLang) {
    lang = usrLang
  }
}

console.log(lang);

$(document).ready(function() {
  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

// get/set the selected language
$(".translate").click(function() {
  var lang = $(this).attr("id");

  // update localStorage key
  if ('localStorage' in window) {
    localStorage.setItem('uiLang', lang);
    console.log(localStorage.getItem('uiLang'));
  }

  $(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
  });
});

我已将其更改为 HTML，但仍然没有成功，有人有任何想法吗？

谢谢!

Answer 1

如果要简化，就把css类去掉，直接用引用就行了。

var arrLang = {
  "en-gb": {
    "HOME": "Home",
    "ABOUT": "About Us",
    "CONTACT": "Contact Us",
  },
  "zh-tw": {
    "HOME": "首頁",
    "ABOUT": "關於我們",
    "CONTACT": "聯絡我們",
  }
}

function setText (lang) {
  // localStorage.setItem('uiLang', lang);
  $("[data-key]").text( function () {
    var key = $(this).data('key')
    return arrLang[lang][key] || key
  })
}

$(".translate").on("click", function (e) {
  e.preventDefault();
  setText(this.id)
});

// setText(localStorage.getItem('uiLang') || 'en-gb');
setText('en-gb'); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="translate" id="en-gb">English</button>
<button class="translate" id="zh-tw">Chinese</button>

<ul>
  <li data-key="HOME"></li>
  <li data-key="ABOUT"></li>
  <li data-key="CONTACT"></li>
</ul>

你能只用文字吗？是的....但它更复杂，我最终还是会使用数据属性....