多国语言无法在本地运行,但Codepen可以正常运行

时间:2019-12-27 02:05:36

标签: javascript html css localization

我一直在研究,发现创建多语言网站的选择有用,一旦实现了一种方法(jQuery),我发现翻译和处理信息时会有点慢,并且在Chrome中也能部分工作普通的浏览器,但是相同的代码在CodePen中可以正常工作。

我使用的代码。

var arrLang = {
  "hebrew": {
    "about": "עלינו",
    "poject": "פרוייקטים",
    "service": "שירותים",
    "contact": "צור קשר",
  },
  "english": {
    "about": "About",
    "poject": "Projects",
    "service": "Services",
    "contact": "Get In Touch",
  }
};
// The default language is English
var lang = "hebrew";
// 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")]);
          });
        });

到目前为止,我得到了这个结果:

enter image description here

我单击了将内容翻译成英语的英语按钮后,内容保持不变。

这是我的HTML:

<ul>
    <li><a href="#title" class="lang" key="about">About</a></li>
    <li><a href="#section1">Projects</a></li>
    <li><a href="#section2">Services</a></li>
    <li><a href="#section3">Get in Touch</a></li>
    <li><a href="#" class="translate" id="english">English</a>|<a href="#" class="translate" id="hebrew">עברית</a></li>
</ul>

相同的相同代码已上传到codepen,并且由于某些原因它可以工作。

我该如何解决无法在chrome本地运行中运行的翻译问题?

1 个答案:

答案 0 :(得分:1)

下面的代码片段正在做您想做的事。

我将受语言影响的每个元素设置为类public func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) { let hdop: Double = locations!.horizontalAccuracy / 5.0 //5.0 is horizontal accuracy ratio } lang属性,该属性包含与key对象中用于翻译的键相同的键。

我还在arrLang链接上设置了onClick个事件,并且将应该应用的语言传递给事件处理程序函数,而我只是将每个{ {1}}元素是所选语言中的相应值。

בהצלחה:D

עברית | English
innerText