如何通过点击操作实现数组元素动态增删，避免选座场景的重复ID添加

架构老林

2026-10-23

选座功能重复ID问题修正方案

核心问题原因

原有逻辑在点击可用座位时直接执行ID入栈操作，未对「ID是否已存在于已选数组」做校验，也未实现选中状态的反向移除逻辑，因此重复点击同一座位会不断追加重复ID。

修正逻辑要点

每次点击可交互座位时，先校验当前座位ID是否已存在于ids数组中
ID不存在：执行ID入栈、追加展示区DOM、标记座位为已选状态的逻辑
ID已存在：执行数组元素移除、删除对应展示DOM、取消座位已选标记的逻辑
优先校验不可用座位状态，不可用座位点击直接触发失败提示，不执行切换逻辑

修正后完整可运行代码

var ids = [];
$seatid = ids;
var status = "unavailable";

$(document).ready(function() {
  var $div = $("<div id='form'></div>").appendTo(".appended");

  $('.seat').click(function(){
    var $seat = $(this);
    var id = $seat.attr("id");

    // 不可用座位直接返回失败
    if ($seat.hasClass('unavailable')){
      console.log('Failed');
      console.log(id);
      return;
    }

    // 执行选中状态切换
    const existIndex = ids.indexOf(id);
    if (existIndex > -1) {
      // 已选中：移除对应数据与展示
      ids.splice(existIndex, 1);
      $seat.removeClass('selected');
      $div.find(`[data-seat-id="${id}"]`).remove();
    } else {
      // 未选中：新增对应数据与展示
      ids.push(id);
      $seat.addClass('selected');
      $div.append($(`<div data-seat-id="${id}">${id}<br></div>`));
    }
  });
});

补充优化说明

每个展示的座位号绑定data-seat-id自定义属性，后续移除已选座位时可精准定位对应DOM，无需全量重渲染展示列表，性能更优

新增selected类作为座位选中态标记，可搭配以下基础CSS规则实现座位状态的视觉区分：

.seat.available {
  background: #e5e5e5;
  cursor: pointer;
}
.seat.selected {
  background: #409eff;
  cursor: pointer;
}
.seat.unavailable {
  background: #dcdfe6;
  cursor: not-allowed;
}