如何用JavaScript实现点击.item插入.item2的.main_place（限选2个）？

需求说明 #

开发论文模板生成应用时，需要实现以下功能：

• 页面内15个带.item类的区块是关键字参数，点击任意.item即可触发插入操作
• 存在4个带.item2类的谓词模板，每个模板包含2个.main_place插槽
• 每个.item2模板仅能插入2个参数，支持用户自定义参数在谓词中的展示顺序

现有问题分析 #

你之前尝试的代码存在两个核心问题：

1. getElementById('main_place')仅能选中页面中第一个匹配元素，无法区分不同.item2内的插槽
2. 未实现"每个模板仅插入2个参数"的限制逻辑，也未完成点击.item触发插入的交互逻辑

完整实现代码 #

HTML结构（补充示例） #

<!-- 关键字参数区域 -->
<div class="item" data-arg-id="arg1">first block</div>
<div class="item" data-arg-id="arg2">second block</div>
<div class="item" data-arg-id="arg3">third block</div>
<!-- 可继续添加剩余12个.item元素 -->

<!-- 谓词模板区域 -->
<div class="item2">
  put the first block <div class="main_place" data-slot="1"></div> and the second one <div class="main_place" data-slot="2"></div>.
</div>
<div class="item2">
  template 2: <div class="main_place" data-slot="1"></div> and <div class="main_place" data-slot="2"></div>.
</div>
<div class="item2">
  template 3: <div class="main_place" data-slot="1"></div> and <div class="main_place" data-slot="2"></div>.
</div>
<div class="item2">
  template 4: <div class="main_place" data-slot="1"></div> and <div class="main_place" data-slot="2"></div>.
</div>

交互样式（CSS） #

.item {
  padding: 8px 12px;
  margin: 0 4px 8px 0;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.2s;
}
.item:hover {
  background-color: #e0e0e0;
}

.main_place {
  display: inline-block;
  padding: 4px 8px;
  border: 1px dashed #999;
  border-radius: 4px;
  min-width: 100px;
  text-align: center;
  cursor: default;
}
.main_place.filled {
  border-style: solid;
  background-color: #e8f4f8;
  cursor: pointer;
}

核心逻辑（JavaScript） #

// 给所有参数区块绑定点击事件
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', function() {
    const argContent = this.innerHTML;
    const argId = this.getAttribute('data-arg-id');
    
    // 找到第一个未填充的插槽
    const emptySlot = document.querySelector('.main_place:not(.filled)');
    
    if (emptySlot) {
      // 填充插槽并标记状态
      emptySlot.innerHTML = argContent;
      emptySlot.setAttribute('data-filled-arg', argId);
      emptySlot.classList.add('filled');
    } else {
      alert('所有参数插槽已填满，点击已填充的插槽可替换内容');
      // 若所有插槽已满，开启替换功能（仅提示后生效一次）
      document.querySelectorAll('.main_place.filled').forEach(slot => {
        if (!slot.hasAttribute('data-replace-enabled')) {
          slot.setAttribute('data-replace-enabled', 'true');
          slot.addEventListener('click', function() {
            this.innerHTML = argContent;
            this.setAttribute('data-filled-arg', argId);
          });
        }
      });
    }
  });
});

// 插槽清除功能：点击已填充的插槽可选择清除
document.addEventListener('click', function(e) {
  if (e.target.matches('.main_place.filled')) {
    if (confirm('确定要清除这个参数吗？')) {
      e.target.innerHTML = '';
      e.target.removeAttribute('data-filled-arg');
      e.target.classList.remove('filled');
    }
  }
});

关键功能说明 #

1. 自动填充逻辑：点击.item时，自动定位页面中第一个空的.main_place插槽填充内容
2. 填充限制：当所有8个插槽（4个模板×2个）填满后，弹出提示并开启插槽替换功能
3. 状态跟踪：用data-*属性记录插槽填充的参数ID，用CSS类标记插槽填充状态
4. 交互优化：添加hover效果、填充状态样式，支持清除已填充的参数

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