jquery - 语言切换 - 使用 HTML 而不是 Key
问题描述
我之前看到过关于如何使用 Json 创建多语言网站的优秀论坛(使用基于 jQuery 和 JSON 的方法构建多语言网站)。
我想看看是否可以使用它,但不使用 key 属性,而是使用普通的 HTML。请参阅 codepen:- https://codepen.io/scottYg55/pen/ZEzpOpm
我可以看到在 jQuery 中调用了密钥:
<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,但仍然没有运气,有人有什么想法吗?
谢谢!
解决方案
如果要简化,请删除 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>
你能用文字来做吗?是的....但它更复杂,我最终仍会使用数据属性....
推荐阅读
- google-colaboratory - 在 Google Colab 中修改 .py 文件不生效
- html - 在屏幕上放置一系列标签
- javascript - 水平多行滚动画廊?
- node.js - 如何将文件上传到 nodejs kubeless 函数?
- javascript - 节点js mongodb中的异步/等待处理错误
- mysql - 从 STATION 查询不以元音开头且不以元音结尾的 CITY 名称列表。您的结果不能包含重复项
- reactjs - 在 ReactJS 中添加一个类并从另一个类中删除类
- python - pybind11::array_t 是否有(深)复制构造函数?
- php - 如何将数组转换为多维数组
- c# - 加载视图后触发按钮单击