js隔行选座

admin 2026年02月18日 17:02 103 0

JavaScript隔行选座功能主要用于实现座位选择时避免相邻座位被同时选中，适用于影院、会议室等场景，通过DOM操作获取所有座位元素，添加点击事件监听，根据座位所在行号（如奇偶行交替）判断是否允许选中：当选中某座位时，自动禁用其相邻行或指定间隔行的座位，确保选座间隔，同时支持选中状态样式切换（如颜色变化）及取消选择功能，提升用户选座体验，满足社交距离或实际布局需求。

JavaScript实现隔行选座功能：从原理到代码实践

在电影院、剧院、会议室等场景中，“选座”是常见的交互需求，而“隔行选座”作为一种特殊规则（如避免相邻行同时选座以保持间距，或满足特定活动要求），需要在前端实现更复杂的交互逻辑，本文将详细介绍如何用JavaScript实现隔行选座功能，从需求分析到代码实现，一步步拆解核心逻辑。

需求场景与规则定义

应用场景

隔行选座常见于需要控制座位密度的场景：

影院观影：避免前后排观众干扰，规定奇数行和偶数行不能同时选座。
考试座位：防止相邻考生作弊，要求同一考生前后隔行就座。
活动报名：某些活动需保持观众间距，强制隔行选择座位。

核心规则

本文以“奇偶行互斥”为例定义规则：

同一行内可选择多个座位（如第1行选3个座位）。
若某一行（如奇数行）有选中座位，则相邻的偶数行不能选座，反之亦然。
取消某一行选中座位后,相邻行恢复可选状态。

技术实现思路

实现隔行选座需解决三个核心问题：

座位渲染：如何用HTML/CSS构建行列式座位布局？
状态管理：如何记录每个座位的选中状态及行级选中状态？
交互逻辑：如何根据隔行规则处理点击事件，动态更新座位状态？

数据结构设计

座位数据：使用二维数组存储座位信息，每个座位包含id、row（行号）、col（列号）、selected（是否选中）等字段。
行级状态：用对象记录每行的选中状态，如{ row1: true, row2: false }，用于快速判断相邻行是否互斥。

交互流程

用户点击座位,触发点击事件。
获取座位所在行号,判断当前行是否允许选座（相邻行无选中座位）。
若允许,切换座位选中状态，并更新行级状态；若不允许，提示用户或忽略点击。
重新渲染UI,根据选中状态更新座位样式。

代码实现

HTML结构：构建座位布局

使用grid布局实现行列式座位，每行用div包裹，座位用button实现，便于绑定事件和键盘访问。

```html 隔行选座系统

隔行选座（奇偶行互斥）

已选座位：无

```

CSS样式：座位布局与状态区分

使用CSS Grid布局控制座位排列，通过不同类名区分座位状态（可选/选中/禁用），并添加过渡动画提升交互体验。

```css /* style.css */ .container { max-width: 800px; margin: 0 auto; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.seat-map { display: grid; grid-template-columns: repeat(10, 1fr); / 每行10个座位 / gap: 10px; margin: 20px 0; }

.seat-row { display: contents; / 使子元素直接成为Grid子项 / }

.seat { width: 40px; height: 40px; border: 1px solid #ddd; background-color: #f8f9fa; cursor: pointer; border-radius: 6px; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; }

.seat:hover:not(.disabled) { background-color: #e9ecef; transform: scale(1.05); }

.seat.selected { background-color: #28a745; color: white; border-color: #1e7e34; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.seat.disabled { background-color: #e9ecef; cursor: not-allowed; opacity: 0.7; }

.info { margin-top: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; }

confirm-btn {

margin-top: 10px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s;

confirm-btn:hover {

background-color: #0056b3;

/ 响应式设计 / @media (max-width: 600px) { .seat-map { grid-template-columns: repeat(8, 1fr); gap: 6px; } .seat { width: 35px; height: 35px; } }

<h4

标签： #js #隔行