如何实现表单输入值的切换显示，而非页面重载后直接展示？

步骤1：修改生成逻辑并绑定点击事件 #

直接拼接innerHTML不好绑定独立事件，改成先创建元素再绑定点击逻辑：

// 创建figure元素
const figure = document.createElement('figure');
figure.innerHTML = `<img src='img/albumcover.jpeg' width='150px' alt='chosen PC card'/>
<figcaption class="album-info">Title: ${title.value}</figcaption>
<figcaption class="album-info">Artist: ${artist.value}</figcaption>
<figcaption class="album-info">Genre: ${genre.value}</figcaption>`;

// 添加到相册容器
albumgallery.appendChild(figure);

// 给当前图片绑定切换事件
const albumImg = figure.querySelector('img');
albumImg.addEventListener('click', () => {
  const infoItems = figure.querySelectorAll('.album-info');
  infoItems.forEach(item => {
    item.classList.toggle('hidden');
  });
});

步骤2：添加CSS控制显示/隐藏 #

在样式表中加入：

/* 默认显示信息，点击后隐藏 */
.album-info.hidden {
  display: none;
}

/* 如果需要默认隐藏信息，就把下面这行加上 */
/* .album-info {
  display: none;
} */

核心逻辑说明 #

• 用classList.toggle('hidden')实现一键切换：点击图片时，所有信息项的hidden类会被添加/移除，从而切换显示状态
• 给每个figure单独绑定事件，避免多个相册项互相干扰

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