如何切换网站语言时同步修改<a>按钮的href属性？

需求说明 #

网站支持西班牙语和英语切换，需实现：

• 西语模式：按钮显示Ver CV，跳转assets/img/File1.pdf
• 英文模式：按钮显示View CV，跳转assets/img/File2.pdf

解决方案 #

第一步：修改按钮HTML，添加唯一标识

给按钮加个唯一ID，方便JS精准定位：

<div data-aos="fade-up" data-aos-delay="800" class="text-center">
  <a href="assets/img/File1.pdf" class="btn-get-started scrollto" id="cv-link">Ver CV</a>
</div>

第二步：编写语言切换逻辑

下面提供原生JavaScript和jQuery两种实现方式，按需选择：

原生JavaScript版本

// 统一管理语言对应的文本和链接，后续扩展/修改更方便
const langConfig = {
  es: {
    cvText: 'Ver CV',
    cvUrl: 'assets/img/File1.pdf'
  },
  en: {
    cvText: 'View CV',
    cvUrl: 'assets/img/File2.pdf'
  }
};

// 更新CV按钮的文本与跳转链接
function updateCVButton(lang) {
  const cvLink = document.getElementById('cv-link');
  if (cvLink && langConfig[lang]) {
    cvLink.textContent = langConfig[lang].cvText;
    cvLink.href = langConfig[lang].cvUrl;
  }
}

// 绑定语言切换按钮的点击事件（假设切换按钮ID为lang-switch-es和lang-switch-en）
document.getElementById('lang-switch-es').addEventListener('click', () => {
  // 这里可添加网站其他文本的切换逻辑
  updateCVButton('es');
});

document.getElementById('lang-switch-en').addEventListener('click', () => {
  // 这里可添加网站其他文本的切换逻辑
  updateCVButton('en');
});

// 页面初始化时设置默认语言（这里默认西语）
updateCVButton('es');

jQuery版本

// 语言配置对象
const langConfig = {
  es: {
    cvText: 'Ver CV',
    cvUrl: 'assets/img/File1.pdf'
  },
  en: {
    cvText: 'View CV',
    cvUrl: 'assets/img/File2.pdf'
  }
};

// 更新按钮的文本与链接
function updateCVButton(lang) {
  if (langConfig[lang]) {
    $('#cv-link').text(langConfig[lang].cvText).attr('href', langConfig[lang].cvUrl);
  }
}

// 绑定切换事件
$('#lang-switch-es').click(function() {
  // 这里可添加网站其他文本的切换逻辑
  updateCVButton('es');
});

$('#lang-switch-en').click(function() {
  // 这里可添加网站其他文本的切换逻辑
  updateCVButton('en');
});

// 初始化默认状态
updateCVButton('es');

关键提示 #

• 用langConfig统一管理语言资源，后续新增语言或修改内容时，只需修改这个对象即可，无需改动多处代码
• 确保语言切换按钮的选择器（ID/类名）和代码中的一致，若你的切换按钮用的是其他标识，对应调整事件绑定部分
• 如果网站有浏览器语言检测逻辑，初始化时可将updateCVButton的参数替换为检测到的语言

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