如何用JavaScript实现点击<input type="image">切换F1车队介绍段落

问题说明 #

制作F1着陆页时，点击底部车队logo（<input type="image">元素），椭圆背景色和右侧车队图片可正常切换，但左侧的车队介绍标题和段落无法同步更新，需要补充对应的JavaScript实现逻辑。

现有代码 #

JavaScript代码 #

function imgslider(anything) {
  document.querySelector('.formula').src = anything;
}

function changeCircleColor(color) {
  const ellipse = document.querySelector('.ellipse');
  ellipse.style.background = color;
}

var p = document.getElementById('williams_para');
var btn = document.getElementById('input type=image');
var txt = document.getElementById('williams')

HTML代码 #

<link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet">
<section>
  <div class="ellipse"></div>
  <header>
    <a href="#"> <img src="../PROJECT-4/img/logo.png" class="logo"></a>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="index4-contact.html">Contacts</a></li>
    </ul>
  </header>
  <div class="content">
    <div class="textbox_ferrari">
      <h2 id="ferrari_head">Scuderia Ferrari</h2>
      <p id="ferrari_para">Scuderia Ferrari is the most successful Formula One Team, having bagged 283 wins, 16 Constructors' titles and 15 Driver Championships over the 91 years since it was first established. Created by Enzo Ferrari himself, the team is the oldest and most successful Formula 1 team in history. The Italian team has won the Constructors’ Championship 16 times and the Drivers’ Championship 15 times. <br>
        <br> The current 2022 drivers are Charles Leclerc (left) and Carlos Sainz (right).</p>
    </div>
    <div class="textbox_ar">
      <h2 id="williams_head">Williams Racing</h2>
      <p id="williams_para">The Williams Formula 1 team was founded by racing enthusiast Frank Williams back in 1977. Frank managed to turn Williams into one of the most successful Formula 1 teams in history, winning 9 Constructors’ Titles and 7 Drivers’ Titles. When Williams entered Formula 1, they did so with the intention to fight their way to the top. This makes Williams one of the most decorated teams in the history of the sport. It is technically more successful than even Red Bull and Mercedes. When Nigell Mansell returned in 1991 the following year Williams dominated with the FW14B, which pioneered technology such as active suspension. <br>
        <br> The current 2022 drivers are Nicolas Latifi (left) and Alex Albon (right).</p>
    </div>
    <div class="imgbox">
      <img src="../PROJECT-4/img/ferrari_team.png" class="formula">
    </div>
  </div>
  <div>
    <ul class="thumb">
      <input type="image" src="img/at.png" id="at_thumb" onclick="imgslider('../PROJECT-4/img/at_team.png');changeCircleColor('#1c2136')" />
      <input type="image" src="img/ar.png" id="ar_thumb" onclick="imgslider('../PROJECT-4/img/ar_team1.png');changeCircleColor('#832522')" />
      <input type="image" src="img/ferrari.png" id="ferrari_thumb" onclick="imgslider('../PROJECT-4/img/ferrari_team.png');changeCircleColor('#f31c1cd5')" />
      <input type="image" src="img/am.png" id="am_thumb" onclick="imgslider('../PROJECT-4/img/am_team.png');changeCircleColor('#06646e')" />
      <input type="image" src="img/merc.png" id="merc_thumb" onclick="imgslider('../PROJECT-4/img/merc_team.png');changeCircleColor('#50b8c0')" />
      <input type="image" src="img/williams.png" id="williams_thumb" onclick="imgslider('../PROJECT-4/img/williams_team.png');changeCircleColor('#222836')" />
      <input type="image" src="img/mcl.png" id="mcl_thumb" onclick="imgslider('../PROJECT-4/img/mcl_team.png');changeCircleColor('#ff9801')" />
      <input type="image" src="img/haas.png" id="haas_thumb" onclick="imgslider('../PROJECT-4/img/haas_team.png');changeCircleColor('#ee1d23')" />
      <input type="image" src="img/rb.png" id="rb_thumb" onclick="imgslider('../PROJECT-4/img/rb_team.png');changeCircleColor('#2f3c64')" />
      <input type="image" src="img/alpine.png" id="alpine.png_thumb" onclick="imgslider('../PROJECT-4/img/alpine_team.png');changeCircleColor('#114fa4')" />
    </ul>
  </div>
</section>

解决方案 #

1. 统一管理车队数据 #

先把所有车队的标题、介绍文本、对应颜色整理成对象，方便批量调用：

const teamData = {
  ferrari: {
    title: "Scuderia Ferrari",
    para: "Scuderia Ferrari is the most successful Formula One Team, having bagged 283 wins, 16 Constructors' titles and 15 Driver Championships over the 91 years since it was first established. Created by Enzo Ferrari himself, the team is the oldest and most successful Formula 1 team in history. The Italian team has won the Constructors’ Championship 16 times and the Drivers’ Championship 15 times. <br><br> The current 2022 drivers are Charles Leclerc (left) and Carlos Sainz (right).",
    color: "#f31c1cd5"
  },
  williams: {
    title: "Williams Racing",
    para: "The Williams Formula 1 team was founded by racing enthusiast Frank Williams back in 1977. Frank managed to turn Williams into one of the most successful Formula 1 teams in history, winning 9 Constructors’ Titles and 7 Drivers’ Titles. When Williams entered Formula 1, they did so with the intention to fight their way to the top. This makes Williams one of the most decorated teams in the history of the sport. It is technically more successful than even Red Bull and Mercedes. When Nigell Mansell returned in 1991 the following year Williams dominated with the FW14B, which pioneered technology such as active suspension. <br><br> The current 2022 drivers are Nicolas Latifi (left) and Alex Albon (right).",
    color: "#222836"
  },
  at: {
    title: "AlphaTauri",
    para: "补充AlphaTauri车队介绍文本",
    color: "#1c2136"
  },
  ar: {
    title: "Aston Martin",
    para: "补充Aston Martin车队介绍文本",
    color: "#832522"
  },
  am: {
    title: "Alfa Romeo",
    para: "补充Alfa Romeo车队介绍文本",
    color: "#06646e"
  },
  merc: {
    title: "Mercedes-AMG Petronas",
    para: "补充Mercedes车队介绍文本",
    color: "#50b8c0"
  },
  mcl: {
    title: "McLaren",
    para: "补充McLaren车队介绍文本",
    color: "#ff9801"
  },
  haas: {
    title: "Haas F1 Team",
    para: "补充Haas车队介绍文本",
    color: "#ee1d23"
  },
  rb: {
    title: "Red Bull Racing",
    para: "补充Red Bull车队介绍文本",
    color: "#2f3c64"
  },
  alpine: {
    title: "Alpine F1 Team",
    para: "补充Alpine车队介绍文本",
    color: "#114fa4"
  }
};

2. 简化HTML文本结构 #

把多个文本框合并成一个，统一更新内容（也可以保留多个文本框通过类控制显示隐藏，这里以单文本框为例）：

<div class="content">
  <div class="textbox">
    <h2 id="team_title">Scuderia Ferrari</h2>
    <p id="team_para">Scuderia Ferrari is the most successful Formula One Team...（原文本省略）</p>
  </div>
  <div class="imgbox">
    <img src="../PROJECT-4/img/ferrari_team.png" class="formula">
  </div>
</div>

3. 添加文本更新函数 #

在JS中新增函数，负责根据车队key更新标题和段落：

function updateTeamText(teamKey) {
  const data = teamData[teamKey];
  document.getElementById('team_title').textContent = data.title;
  document.getElementById('team_para').innerHTML = data.para;
}

4. 修改点击事件 #

给每个logo的onclick事件添加文本更新调用，比如：

<input type="image" src="img/ferrari.png" id="ferrari_thumb" onclick="imgslider('../PROJECT-4/img/ferrari_team.png');changeCircleColor('#f31c1cd5');updateTeamText('ferrari')" />
<input type="image" src="img/williams.png" id="williams_thumb" onclick="imgslider('../PROJECT-4/img/williams_team.png');changeCircleColor('#222836');updateTeamText('williams')" />
<!-- 其他车队logo同理添加对应的updateTeamText参数 -->

优化方案（可选） #

用事件委托替代逐个写onclick，代码更简洁：

document.querySelector('.thumb').addEventListener('click', function(e) {
  if (e.target.tagName === 'INPUT') {
    const teamKey = e.target.id.replace('_thumb', '');
    const data = teamData[teamKey];
    const imgSrc = `../PROJECT-4/img/${teamKey}_team.png`;
    
    imgslider(imgSrc);
    changeCircleColor(data.color);
    updateTeamText(teamKey);
  }
});

此时可以删除HTML中所有logo的onclick属性，只要保证input的id格式为xxx_thumb即可。

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