在如何使用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属性。

10-05 20:53
查看更多