如何基于表单选项组合生成不同的影院座位表 [HTML/JS]

嘿DG，你已经搞定了单组座位表的核心功能，现在要扩展到多影片-日期-场次的组合，其实核心就是给每个组合分配一个唯一的身份标识，然后把座位状态和这个标识绑定存储到LocalStorage里。下面是一步步的解决思路和示例代码，帮你快速突破困境：

第一步：设计LocalStorage的存储结构 #

我们需要用「影片-日期-场次」的组合作为唯一键（Key），对应的座位状态作为值（Value）。比如：

• 键：A-20210112-1000（影片A + 2021年1月12日 + 上午10:00）
• 值：一个数组，每个元素对应一个座位的状态（white=未选，green=已选，red=已预订）

这样每个组合的座位状态就会被独立存储，不会互相干扰。

第二步：生成唯一键并加载对应座位表 #

当用户提交表单选择影片、日期、场次后，先把这些值格式化成统一的字符串作为唯一键，然后检查LocalStorage里是否存在这个键：

• 如果不存在，就初始化一个全未选状态的座位数组，存储到LocalStorage并渲染空白座位表；
• 如果存在，就读取已保存的座位状态，渲染出对应状态的座位表。

第三步：修改座位交互逻辑，同步更新存储 #

把你现有的座位点击、预订按钮逻辑和唯一键绑定，每次状态变化时都同步更新LocalStorage里对应键的值：

• 点击座位切换绿色/白色时，实时更新存储的座位状态；
• 点击Reserve按钮把已选座位改为红色后，也同步更新存储。

第四步：切换组合时重新加载对应座位表 #

当用户重新选择不同的影片/日期/场次并提交表单时，重复第二步的逻辑，加载对应组合的座位状态即可。

示例代码片段 #

下面是简化的核心代码，你可以根据自己的DOM结构调整：

// 生成唯一键：统一日期和时间格式，避免因格式差异生成不同键
function getUniqueKey(movie, date, time) {
  const formattedDate = date.replace(/[-/]/g, ''); // 把2021-01-12转成20210112
  const formattedTime = time.replace(/:/g, ''); // 把10:00转成1000
  return `${movie}-${formattedDate}-${formattedTime}`;
}

// 加载对应组合的座位表
function loadSeatTable(movie, date, time) {
  const key = getUniqueKey(movie, date, time);
  let seatStates = localStorage.getItem(key);

  // 初始化或读取座位状态
  if (!seatStates) {
    // 假设你有20个座位，初始全为未选状态
    seatStates = Array(20).fill('white');
    localStorage.setItem(key, JSON.stringify(seatStates));
  } else {
    seatStates = JSON.parse(seatStates);
  }

  // 渲染座位表：根据状态设置颜色
  const seats = document.querySelectorAll('.seat-cell');
  seats.forEach((seat, index) => {
    seat.style.backgroundColor = seatStates[index];
    // 绑定座位点击事件（如果未绑定过）
    seat.onclick = () => toggleSeatStatus(index, key);
  });

  // 绑定预订按钮事件
  document.getElementById('reserve-btn').onclick = () => reserveSelectedSeats(key);
}

// 切换单个座位的选中/未选状态
function toggleSeatStatus(index, key) {
  const seatStates = JSON.parse(localStorage.getItem(key));
  // 已预订的红色座位不能修改
  if (seatStates[index] === 'red') return;
  
  seatStates[index] = seatStates[index] === 'white' ? 'green' : 'white';
  localStorage.setItem(key, JSON.stringify(seatStates));
  // 更新DOM显示
  document.querySelectorAll('.seat-cell')[index].style.backgroundColor = seatStates[index];
}

// 预订所有已选中的绿色座位
function reserveSelectedSeats(key) {
  const seatStates = JSON.parse(localStorage.getItem(key));
  seatStates.forEach((state, index) => {
    if (state === 'green') seatStates[index] = 'red';
  });
  localStorage.setItem(key, JSON.stringify(seatStates));
  // 更新DOM显示
  const seats = document.querySelectorAll('.seat-cell');
  seats.forEach((seat, index) => {
    seat.style.backgroundColor = seatStates[index];
  });
}

// 表单提交触发加载座位表
document.getElementById('booking-form').addEventListener('submit', (e) => {
  e.preventDefault();
  const movie = document.getElementById('movie-select').value;
  const date = document.getElementById('date-select').value;
  const time = document.getElementById('time-select').value;
  loadSeatTable(movie, date, time);
});

额外注意事项 #

• 确保日期和时间的格式统一：比如用户选择的日期可能有不同分隔符（-或/），一定要格式化后再生成键，避免同一个组合生成不同的键；
• 如果你的座位不是固定数量，可以给每个座位设置唯一ID（比如seat-1、seat-2），然后用对象存储状态（比如{"seat-1": "white", "seat-2": "green"}），这样更灵活；
• 可以在页面上显示当前选中的影片、日期、场次，让用户清楚知道自己操作的是哪一组座位表。

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