javascript - 精益方法来替换html中的文本？

Question

我需要通过单击一个简单的按钮来替换多个页面上的文本。两种语言之间最精简的切换是什么？

这只会更改第一个 div 中的文本。我需要在整个网站上应用语言更改。

var text1 = document.getElementById('english');
var text2 = document.getElementById('swedish');

const swap = () => {
  if (text1.classList.contains("hidden")) { //if english contains class 'hidden'
    text1.classList.remove("hidden"); //remove hidden class from english
    text2.classList.add("hidden"); //add hidden class to swedish
  } else {
    text1.classList.add("hidden"); //add hidden class to english
    text2.classList.remove("hidden"); //remove hidden class from swedish
  }
}

.hidden {
  display: none;
}

<button onclick="swap()">Switch Text</button>

<div class="content">
  <div id="english">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div id="swedish" class="hidden">
    <h1>Vällkommen</h1>
    <p>Svensk tekst</p>
  </div>
</div>

Answer 1

1. 按预期使用lang
2. 使用classList.toggle

此脚本可以包含在将 lang 设置为任一语言的每个页面上。

将语言更改为您需要的任何内容。 lang="en"/lang="sv"并相应地更改脚本

从包含 localStorage 的行中删除注释 // 并删除您网站上的这一行:let savingLang = "se_SV";

window.addEventListener("DOMContentLoaded", () => {
  //let savedLang = localStorage.getItem("lang") || "gb_EN";
  let savedLang = "se_SV";
  const btn = document.getElementById("swap");
  btn.dataset.lang = savedLang;

  btn.addEventListener("click", (e) => {
    const tgt = e.target;
    let lang = tgt.dataset.lang;
    lang = lang === "gb_EN" ? "se_SV" : "gb_EN";
    tgt.dataset.lang = lang;
    // localStorage.setItem("lang",lang);
    const divs = document.querySelectorAll('div[lang]');
    divs.forEach(div => div.classList.toggle('hidden', div.lang === lang));
  })
  btn.click()
})

.hidden {
  display: none;
}

<button type="button" id="swap" data-lang="gb_EN">Switch Text</button>

<div class="content">
  <div lang="gb_EN">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div lang="se_SV" class="hidden">
    <h1>Vällkommen</h1>
    <p>Svensk tekst</p>
  </div>
  <div lang="gb_EN">
    <h1>Welcome</h1>
    <p>English text</p>
  </div>
  <div lang="se_SV" class="hidden">
    <h1>Vällkommen</h1>
    <p>Svensk tekst</p>
  </div>
</div>