JS网页英法双语切换问题：仅标题切换成功其余内容无变化

原JS代码存在几个关键问题：

• document.querySelector仅接受单个选择器参数，只会返回匹配到的第一个元素，所以只有.title会被修改
• 代码中的.1;是无效语法，会直接导致脚本报错
• 未对其他类名的元素执行内容更新操作

以下是修正后的JavaScript代码：

// 提前定义语言数据，避免变量提升问题
const data = {
  "english": {
    "title": "welcome!",
    "1": "My work is primarily inspired by nature.",
    "2": "Each creation is unique.",
    "3": "The white porcelain I use",
    "4": "I studied and graduated",
    "5": "I wish to thank"
  },
  "francais": {
    "title": "yoohoo les nazes",
    "1": "Mon travail est d'abord inspiré sur la nature.",
    "2": "chaque création est unique.",
    "3": "La porcelaine blanche que j'utilise",
    "4": "j'ai étudiée et suis diplômée",
    "5": "j'aimerai remercier"
  }
};

document.querySelector('#togBtn').addEventListener('input', (event) => {
  // 根据开关状态确定当前使用的语言
  const activeLang = event.currentTarget.checked ? 'francais' : 'english';
  // 获取当前语言下的所有内容键名
  const contentKeys = Object.keys(data[activeLang]);
  
  // 遍历每个键名，找到对应元素并更新文本
  contentKeys.forEach(key => {
    const targetElement = document.querySelector(`.${key}`);
    if (targetElement) {
      targetElement.textContent = data[activeLang][key];
    }
  });
});

说明 #

1. 将语言数据data提前定义，避免变量提升导致的潜在问题
2. 使用Object.keys获取当前语言下的所有内容键名，通过遍历实现批量更新
3. 修复了原代码中的语法错误，确保所有需要切换的元素都能被正确处理

另外，建议将HTML中的数字类名（如.1、.2）改为更规范的命名（如.text-1、.text-2），虽然当前代码可以正常运行，但非数字开头的类名更符合HTML规范。

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