javascript - 使用 JSON、HTML 和 JavaScript 更改网站语言

Question

我为自己创建了一个简单的作品集，目前是英文的。我还想要德语和其他语言的版本。为此，我有一个包含相应语言的下拉选项框。我想要做的是，一旦选择了一种语言，javascript EventListener 就会注意到这一点并将网站的语言更改为该语言。我有一个 en.json 和 de.json 文件，其中包含文本和文本本身的相应类名。

下拉选项菜单:

<select id="language" class="language">
                        <option>🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG</option>
                        <option>🇩🇪 DE</option>
                        <!-- <option>🇫🇷 FR</option> -->
                        <!-- <option>🇱🇺 LUX</option> -->

</select>

以下是包含类“RecentGrad”和“Name”的 div 示例以及 json 文件结构示例。我有多个文本需要翻译，但我只在这里展示一个以供理解:

<div class="header-text">
                <p class="RecentGrad"> Recent graduate & aspiring developer</p>
</div>

German json file:
{
"RecentGrad": "Hochschulabsolvent & angehender Entwickler"
}

English json file:
{
"RecentGrad": "Recent graduate & aspiring developer"
}

我已经完成了 javascript 的框架，它监听更改，然后应该根据此更改执行操作。我对 HTML、CSS 和 JavaScript 比较陌生，所以我不知道如何从这里开始。我已经查看了多语言网站的多个教程和其他 stackoverflow 主题，但我似乎无法让其中任何一个发挥作用。

<script>document.querySelector('#language').addEventListener("change", function() {
    if (this.value == "🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG") {
        // change all text to ENG
    }else if (this.value == "🇩🇪 DE"){
        // change all text to DE
    // }else if (this.value == "🇫🇷 FR"){
       // change all text to FR
    // }else if (this.value == "🇱🇺 LUX"){
       // change all text to LUX
    }
  });</script>

Answer 1

使用 for...in 从语言对象中提取所有键，然后迭代它们并使用 document.querySelector('.' + key).textContent更改翻译。

const jsonDE = {
  "RecentGrad": "Hochschulabsolvent & angehender Entwickler"
}

const jsonEN = {
  "RecentGrad": "Recent graduate & aspiring developer"
}


document.querySelector('#language').addEventListener("change", function() {
  if (this.value == "🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG") {
    // change all text to ENG
    for (let key in jsonEN) {
      document.querySelector('.' + key).textContent = jsonEN[key]
    }
  } else if (this.value == "🇩🇪 DE") {
    // change all text to DE
    for (let key in jsonDE) {
      document.querySelector('.' + key).textContent = jsonDE[key]
    }
    
  // }else if (this.value == "🇫🇷 FR"){
    // change all text to FR
  // }else if (this.value == "🇱🇺 LUX"){
    // change all text to LUX
  }
});

<select id="language" class="language">
  <option>🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG</option>
  <option>🇩🇪 DE</option>
  <!-- <option>🇫🇷 FR</option> -->
  <!-- <option>🇱🇺 LUX</option> -->
</select>

<div class="header-text">
  <p class="RecentGrad"> Recent graduate & aspiring developer</p>
</div>