基于JSON、HTML和JavaScript实现网站语言切换功能

第一步：优化下拉菜单的value属性 #

先给每个选项加上标准语言代码作为value，避免依赖emoji和文本判断（容易出兼容问题）：

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

第二步：编写完整的语言切换逻辑 #

用纯JS实现通用的语言加载、文本替换逻辑，同时支持记住用户选择：

// 缓存当前语言数据，避免重复请求
let currentLangData = {};

// 页面初始化时自动加载默认语言
document.addEventListener('DOMContentLoaded', () => {
    // 优先用用户上次保存的选择，其次是浏览器默认语言，最后 fallback 到英文
    const defaultLang = localStorage.getItem('selectedLang') || navigator.language.slice(0,2) || 'en';
    document.querySelector('#language').value = defaultLang;
    loadLanguage(defaultLang);
});

// 监听下拉菜单切换事件
document.querySelector('#language').addEventListener("change", function() {
    const selectedLang = this.value;
    localStorage.setItem('selectedLang', selectedLang); // 保存用户选择
    loadLanguage(selectedLang);
});

// 核心：加载语言文件并替换页面文本
function loadLanguage(lang) {
    // 假设你的语言文件放在根目录的lang文件夹下，比如 /lang/en.json
    fetch(`/lang/${lang}.json`)
        .then(res => res.json())
        .then(data => {
            currentLangData = data;
            // 遍历所有翻译键，替换对应类名的元素文本
            Object.keys(data).forEach(key => {
                const elements = document.querySelectorAll(`.${key}`);
                elements.forEach(el => el.textContent = data[key]);
            });
        })
        .catch(err => {
            console.error(`加载${lang}语言文件失败:`, err);
            // 加载失败时自动切换到英文
            if (lang !== 'en') loadLanguage('en');
        });
}

关键细节说明 #

• 语言文件路径：确保你的en.json、de.json放在项目根目录的lang文件夹下，结构如下：

  你的项目/
  ├── lang/
  │   ├── en.json
  │   └── de.json
  ├── index.html
  └── ...
  

• 批量替换逻辑：只要HTML元素的类名和JSON文件中的键对应，就能自动替换文本，新增翻译项不需要修改JS，只需要维护JSON文件。
• 用户偏好记忆：用localStorage保存用户的语言选择，刷新页面后会保留设置。
• 错误兜底：如果某个语言文件加载失败，会自动切换到英文，避免页面出现空白。

内容的提问来源于stack exchange，提问作者Alexander Veheecke