如何为电影选择器项目的radio buttons编写对应switch statement

你的基础事件绑定逻辑没有问题，只需补全switch分支的内容即可正常运行，以下是完整可复用的实现代码：

参考HTML结构 #

除了你的单选按钮外，建议新增一个内容容器用于展示匹配的电影信息：

<!-- 单选按钮组 -->
<input type="radio" id="avenger-movies" name="select-movie" value="avenger-movies">
<label for="avenger-movies">Avenger films</label>
<input type="radio" id="dc-movies" name="select-movie" value="dc-movies">
<label for="dc-movies">DC films</label>
<input type="radio" id="animation-movies" name="select-movie" value="animation-movies">
<label for="animation-movies">动画电影</label>
<input type="radio" id="romance-movies" name="select-movie" value="romance-movies">
<label for="romance-movies">爱情电影</label>
<input type="radio" id="sci-fi-movies" name="select-movie" value="sci-fi-movies">
<label for="sci-fi-movies">科幻电影</label>

<!-- 电影内容展示容器 -->
<div id="movie-content" style="margin: 20px 0; padding: 15px; border: 1px solid #e5e7eb;"></div>

完整JS代码 #

const getRadioButtons = document.getElementsByName("select-movie");
const movieContentEl = document.getElementById("movie-content");

getRadioButtons.forEach((radiobtn) => {
  radiobtn.addEventListener('change', (event) => {
    const inputValue = event.target.value;
    switch (inputValue) {
      case "avenger-movies":
        movieContentEl.innerHTML = `
          <h3>复仇者联盟系列</h3>
          <ul>
            <li>《复仇者联盟1》</li>
            <li>《复仇者联盟2：奥创纪元》</li>
            <li>《复仇者联盟3：无限战争》</li>
            <li>《复仇者联盟4：终局之战》</li>
          </ul>
        `;
        break;
      case "dc-movies":
        movieContentEl.innerHTML = `
          <h3>DC系列电影</h3>
          <ul>
            <li>《蝙蝠侠：黑暗骑士》</li>
            <li>《神奇女侠》</li>
            <li>《海王》</li>
            <li>《新蝙蝠侠》</li>
          </ul>
        `;
        break;
      case "animation-movies":
        movieContentEl.innerHTML = `
          <h3>热门动画电影</h3>
          <ul>
            <li>《寻梦环游记》</li>
            <li>《疯狂动物城》</li>
            <li>《蜘蛛侠：平行宇宙》</li>
            <li>《铃芽之旅》</li>
          </ul>
        `;
        break;
      case "romance-movies":
        movieContentEl.innerHTML = `
          <h3>经典爱情电影</h3>
          <ul>
            <li>《泰坦尼克号》</li>
            <li>《爱在黎明破晓前》</li>
            <li>《怦然心动》</li>
            <li>《情书》</li>
          </ul>
        `;
        break;
      case "sci-fi-movies":
        movieContentEl.innerHTML = `
          <h3>高分科幻电影</h3>
          <ul>
            <li>《星际穿越》</li>
            <li>《盗梦空间》</li>
            <li>《沙丘》</li>
            <li>《流浪地球》系列</li>
          </ul>
        `;
        break;
      default:
        movieContentEl.innerHTML = "<p>暂无对应分类的电影内容</p>";
    }
  })
})

实现要点 #

• 每个case分支末尾必须添加break，否则会顺序执行后续所有分支的逻辑
• default分支用于处理未匹配到的value值，避免无响应的情况
• 可自由替换每个case内的渲染内容，比如添加电影海报、评分、简介等信息

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