JavaScript脚本仅对首个匹配元素生效？多语言切换问题求助

数据老陈

2026-5-7

解决多语言切换脚本仅生效首个元素的问题

嘿，这个问题的根源其实很简单——HTML里的ID是唯一标识，一个页面里不能有多个相同ID的元素！你现在用$('#german')和$('#english')，jQuery只会找到页面中第一个匹配该ID的元素，剩下的同名ID元素都会被忽略，这就是为啥只有第一个生效~

修复步骤：

修改HTML元素的标识：把所有德语内容的元素的id="german"改成class="german"，英语内容的元素id="english"改成class="english"。这样每个语言的内容元素都能通过类选择器被批量选中。
更新jQuery脚本：把ID选择器#german/#english换成类选择器.german/.english，这样就能匹配页面中所有对应类的元素了。

修改后的脚本如下：

$(document).ready(function() {
  if (window.location.href.indexOf('/de') > -1) {
    $('.german').removeClass('hidetranslation');
  } else {
    $('.english').removeClass('hidetranslation');
  }
});

额外优化建议：

可以用更精准的URL检测方式，比如用window.location.pathname代替href，避免URL里的查询参数或哈希值干扰判断：
```
if (window.location.pathname.startsWith('/de')) {
  // 显示德语内容
}
```
如果后续要扩展更多语言，可以考虑用data-lang属性来标记元素，比如<div data-lang="de" class="hidetranslation">...</div>，这样脚本可以更灵活地处理多语言场景：
```
const currentLang = window.location.pathname.startsWith('/de') ? 'de' : 'en';
$(`[data-lang="${currentLang}"]`).removeClass('hidetranslation');
```