网站多语言切换功能异常求助：切换非英文后元素全隐藏

问题根源 #

1. 无效onchange属性导致代码中断：你在<option>标签上添加的onchange="en"等属性完全多余，且这些函数并未定义，选择选项时会触发JS报错，直接中断后续show()方法的执行——这就是切换语言后所有带lang属性的元素都被隐藏的核心原因。
2. 初始代码中JS和CSS重复隐藏拉脱维亚语、挪威语元素，虽不影响功能，但存在冗余。

修正后的代码 #

HTML（移除无效属性，补充示例内容元素）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form class="lang-switch">
  <select id="lang-switch">
    <option value="en" selected>EN</option>
    <option value="lv">LV</option>
    <option value="no">NO</option>
  </select>
</form>
<!-- 示例导航栏元素 -->
<nav lang="en">English Navigation Menu</nav>
<nav lang="lv">Latvian Navigation Menu</nav>
<nav lang="no">Norwegian Navigation Menu</nav>

CSS（保留初始隐藏逻辑）

[lang="lv"],
[lang="no"] {
  display: none;
}

JavaScript（简化逻辑，避免冗余）

$('#lang-switch').change(function() {
  const selectedLang = $(this).val();
  // 隐藏所有带lang属性的元素
  $('[lang]').hide();
  // 显示选中语言的对应元素
  $(`[lang="${selectedLang}"]`).show();
});

额外优化方案 #

如果想让逻辑更集中，可移除CSS中的隐藏规则，完全用JS控制初始状态：

// 初始隐藏非英文元素
$('[lang="lv"], [lang="no"]').hide();

$('#lang-switch').change(function() {
  const selectedLang = $(this).val();
  $('[lang]').hide();
  $(`[lang="${selectedLang}"]`).show();
});

注意：确保带lang属性的元素为同级结构，不要将目标语言元素嵌套在其他语言元素内部，否则父元素隐藏时子元素也会被连带隐藏。

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