Question

我为我的网站创建了一个引导导航栏。我还为语言选择添加了一个下拉列表

<li class="nav-item dropdown">
    <a class="nav-link dropright" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div id="language"></div></a>
    <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown" >
         <a class="dropdown-item" href="#" onClick="language=1;"><div id="languageDe"></div></a>
         <a class="dropdown-item" href="#" onClick="language=2;"><div id="languageEn"></div></a></div>
</li>

，其中从包含language，languageDe和languageEn的正确标签的JSON文件中获取标签。我还添加了onClick="language=1;"和onClick="language=2;"作为超链接的属性。我想使用"language='de'"和"language='en'"而不是数字，但是我不确定正确的语法。现在，我想使用变量language来加载适当的JSON语言文件de.json或en.json。但这似乎并不以这种方式工作。

 <script>
    window.onload = function() {
        let language = 1; // initialize language as german
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let response = JSON.parse(xhttp.responseText);
                // get language selection labels and put them into the div tags
                document.getElementById("language").innerHTML = response.language;
                  document.getElementById("languageDe").innerHTML = response.languageDe;
                  document.getElementById("languageEn").innerHTML = response.languageEn;
            }
        };
        // select language
        if (language===1) {
            xhttp.open("GET", "./json/de.json", true);
        } else if (language === 2) {
            xhttp.open("GET", "./json/en.json", true);
        }

        xhttp.send();  
    };
</script>

Answer 1

您仅在Windows onload事件中加载一次语言。在您的情况下，Onclick属性没有执行任何操作。您必须调用适当的函数。

如果我对您的理解正确，请认为以下代码适用于您的情况。

 function changeLanguage(language){
        localStorage.setItem('lang', language);
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                let response = JSON.parse(xhttp.responseText);
                // get language selection labels and put them into the div tags
                document.getElementById("language").innerHTML = response.language;
                  document.getElementById("languageDe").innerHTML = response.languageDe;
                  document.getElementById("languageEn").innerHTML = response.languageEn;
            }
        };
        // select language
        if (language===1) {
            xhttp.open("GET", "./json/de.json", true);
        } else if (language === 2) {
            xhttp.open("GET", "./json/en.json", true);
        }

        xhttp.send();  
 }
 
 
 
 window.onload = function() {
       if(!localStorage.getItem('lang')) changeLanguage(1);
       else changeLanguage(parseInt(localStorage.getItem('lang')));
    };

<li class="nav-item dropdown">
    <a class="nav-link dropright" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div id="language"></div></a>
    <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown" >
         <a class="dropdown-item" href="#" onClick="changeLanguage(1)"><div id="languageDe"></div></a>
         <a class="dropdown-item" href="#" onClick="changeLanguage(2)"><div id="languageEn"></div></a></div>
</li>

更新，我已修改代码以将先前的值保留在localStorage中

通过onClick选择语言

1 个答案: