在如何使用Json创建多语言站点(Build multiple language website using jQuery and JSON based methods)之前,我看到了一个很棒的论坛。
我想看看是否可以使用此属性,但不使用key属性,而是使用普通的HTML。请参阅代码笔:-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>
你能只用文字吗?是的。但是它更复杂,最终我仍然会使用data属性。