本文介绍一种基于 javascript 的图像选择器实现方案，支持最多 5 个可选位置、点击添加/移除图片、自动填充首个空位，并在满员时禁用新增操作。

本文介绍一种基于 javascript 的图像选择器实现方案，支持最多 5 个可选位置、点击添加/移除图片、自动填充首个空位，并在满员时禁用新增操作。

要构建一个灵活、健壮的图像选择器（最多 5 个选中项），核心在于状态管理与智能定位逻辑：不能简单按顺序追加，而需动态查找第一个空闲 selectionX 占位符；同时支持反向操作——点击已选中的占位图即可取消选择，释放该位置。

以下是一个完整、可直接运行的实现方案：

✅ HTML 结构（精简优化版）

<div class="image-grid">
  <!-- 可选源图（带 data-src 和 class="source-img"） -->
  <img src="images/portraits/picture1.png" alt="Picture 1" class="source-img"    style="max-width:90%"><img src="images/portraits/picture2.png" alt="Picture 2" class="source-img"    style="max-width:90%"><img src="images/portraits/picture3.png" alt="Picture 3" class="source-img"    style="max-width:90%"><!-- ...更多源图 -->
</div>

<h3>当前选择（最多 5 张）：</h3>
<div class="selection-area">
  <img src="images/portraits/placeholder.png" alt="空位" class="selection-slot" data-index="1"><img src="images/portraits/placeholder.png" alt="空位" class="selection-slot" data-index="2"><img src="images/portraits/placeholder.png" alt="空位" class="selection-slot" data-index="3"><img src="images/portraits/placeholder.png" alt="空位" class="selection-slot" data-index="4"><img src="images/portraits/placeholder.png" alt="空位" class="selection-slot" data-index="5">
</div>

✅ JavaScript 核心逻辑

// 缓存 DOM 元素
const sourceImgs = document.querySelectorAll('.source-img');
const selectionSlots = document.querySelectorAll('.selection-slot');

// 状态跟踪：记录每个 slot 当前是否被占用（true = 已选）
const slotOccupied = [false, false, false, false, false]; // 索引 0~4 对应 selection1~5

// 为每张源图绑定点击事件
sourceImgs.forEach(img => {
  img.addEventListener('click', function() {
    const src = this.src;

    // 查找第一个空闲 slot（从左到右）
    const freeIndex = slotOccupied.indexOf(false);

    if (freeIndex === -1) {
      alert("已达最大选择数（5 张）！请先取消某项再添加。");
      return;
    }

    // 填入图片并标记为已占用
    selectionSlots[freeIndex].src = src;
    selectionSlots[freeIndex].dataset.src = src; // 便于后续识别
    slotOccupied[freeIndex] = true;
  });
});

// 为每个选择槽绑定点击移除逻辑
selectionSlots.forEach((slot, idx) => {
  slot.addEventListener('click', function() {
    // 仅当该槽非 placeholder 时才允许取消（避免误点空白）
    if (this.src.includes('placeholder.png')) return;

    this.src = 'images/portraits/placeholder.png';
    this.removeAttribute('data-src');
    slotOccupied[idx] = false;
  });
});

⚠️ 关键注意事项

• 不要依赖 src === "" 判断空位：浏览器可能将相对路径转为绝对 URL，或 placeholder 图片本身有合法 src。推荐使用 slotOccupied 数组或 dataset.src 显式标记状态。
• 防误操作增强：点击占位图时，我们通过 includes('placeholder.png') 忽略空白点击，避免清空误触。
• 可扩展性提示：若未来需支持拖拽、排序、去重等，建议改用数组管理选中项（如 selectedImages = []），再统一渲染到 slots，逻辑更清晰可控。
• 无障碍友好：为 .selection-slot 添加 tabindex="0" 并补充键盘事件（Enter/Space 触发取消），可进一步提升可访问性。

该方案简洁、无外部依赖、兼容所有现代浏览器，且逻辑清晰易维护——既满足“首次空位自动填充”的核心需求，又兼顾取消、满员拦截与用户体验细节。