如何用JavaScript循环批量生成F1车队跳转按钮，减少重复代码？

1. 修正基础数据定义 #

你原代码中的字符串类型值没有加引号，存在语法错误，修正后的数组写法如下：

// 所有字符串类型的属性值都需要用单/双引号包裹，补全10个车队信息即可
const teams = [
  { name: '梅赛德斯', logo: 'teammercedes.icon', web: 'https://mercedes.com' },
  { name: '法拉利', logo: 'ferrari.icon', web: 'https://ferrari.com' },
  // 继续补充剩余8支车队的信息即可
]

注意官网地址要补全https://前缀，否则跳转时会被识别为当前站点的相对路径，导致跳转失败。

2. 准备HTML挂载容器 #

先在你的HTML页面中预留按钮的存放位置，方便后续JS插入内容和统一控制样式：

<!-- 车队导航菜单容器 -->
<div id="team-menu"></div>

3. 编写循环渲染逻辑 #

不要在循环条件中硬写i < 11，直接用数组的length属性适配车队数量，避免后续增减车队时还要修改循环条件，完整逻辑如下：

// 获取菜单容器
const menuContainer = document.getElementById('team-menu')

// 遍历车队数组生成按钮
for (let i = 0; i < teams.length; i++) {
  // 取出当前遍历的车队信息
  const currentTeam = teams[i]
  // 生成按钮DOM结构，直接用模板字符串填充对应数据
  const buttonHtml = `
    <button class="team-btn">
      <img src="${currentTeam.logo}" alt="${currentTeam.name}logo">
      <span>${currentTeam.name}</span>
    </button>
  `
  // 把生成的按钮插入到容器中
  menuContainer.innerHTML += buttonHtml
}

// 给所有生成的按钮绑定点击跳转事件
document.querySelectorAll('.team-btn').forEach((btn, index) => {
  btn.addEventListener('click', () => {
    window.location.href = teams[index].web
  })
})

可选优化：添加样式 #

你可以在CSS中给.team-btn类统一设置按钮样式，不需要单独给每个按钮写样式：

.team-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin: 4px;
  cursor: pointer;
}
.team-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

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