HTML/JS选座功能优化：实现座位ID点击显示与二次点击移除

我来帮你搞定这个选座应用的功能！你的需求是点击座位时把ID显示在指定区域，再次点击时移除对应的ID对吧？咱们来调整代码，让它完美实现这个逻辑：

修复后的完整代码 #

HTML 部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seats-row-A">
  <img id="A1" class="seat-unique" src="chair.svg">
  <img id="A2" class="seat-unique" src="chair.svg">
  <img id="A3" class="seat-unique" src="chair.svg">
  <img id="A4" class="seat-unique" src="chair.svg">
  <img id="A5" class="seat-unique" src="chair.svg">
  <img id="A6" class="seat-unique" src="chair.svg">
  <img id="A7" class="seat-unique" src="chair.svg">
</div>
<h2>Seats chosen:<span id="seatsOutput"></span></h2>

JavaScript 部分 #

$(document).ready(function() {
  var seatsOutput = document.getElementById("seatsOutput");
  
  // 用jQuery绑定点击事件更简洁
  $('.seat-unique').click(function() {
    const $seat = $(this);
    
    if ($seat.hasClass('seatClicked')) {
      // 取消选中座位：切换图片、移除类
      this.src = "chair.svg";
      $seat.removeClass('seatClicked');
      
      // 从显示区域移除对应ID
      let currentSeats = seatsOutput.textContent.trim().split(' ');
      // 过滤掉空字符串和当前ID
      let updatedSeats = currentSeats.filter(seat => seat && seat !== this.id);
      seatsOutput.textContent = updatedSeats.join(' ');
    } else {
      // 选中座位：切换图片、添加类
      this.src = "chairclicked.svg";
      $seat.addClass('seatClicked');
      
      // 添加ID到显示区域，避免开头多余空格
      if (seatsOutput.textContent.trim() !== '') {
        seatsOutput.textContent += ' ';
      }
      seatsOutput.textContent += this.id;
    }
  });
});

关键修改说明 #

1. 重构点击逻辑：
   把原来的两个独立if改成if-else结构，避免了逻辑冲突（原来的代码中添加临时new类后，两个if可能同时触发，导致错误行为）。

2. 精准移除ID显示：
   取消选中座位时，我们把显示区域的文本拆分成数组，过滤掉当前点击的座位ID，再重新拼接成字符串放回显示区域，这样就能准确移除对应的ID，而不会影响其他选中的座位。

3. 优化显示格式：
   添加ID时先判断显示区域是否已有内容，只有在已有内容的情况下才添加空格，避免开头出现多余的空格，让显示更整洁。

4. 简化事件绑定：
   用jQuery的$('.seat-unique').click()替代原生的循环绑定，代码更简洁易读，jQuery会自动帮我们遍历所有座位元素绑定事件。

注意事项 #

• 确保chair.svg和chairclicked.svg的文件路径正确，否则座位图片无法正常切换。
• 如果后续需要添加更多座位行，只要保持seat-unique类不变，新座位会自动绑定点击事件，无需修改JS代码。

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