如何实现两个颜色选择器分别对应填充指定输入框？

核心问题是你的JavaScript代码没有区分两个独立的颜色选择器面板，导致触发颜色选择事件时同时更新了两个输入框。以下是针对性的修复步骤：

1. 确认HTML元素的对应关系 #

先确保输入框和颜色面板的ID唯一且一一对应，示例结构如下：

<!-- 第一组：颜色选择器 + 输入框 -->
<input type="text" id="colorInput1" placeholder="选择颜色1">
<div class="color-picker" id="colorPicker1">
  <div class="color-option" data-color="红色"></div>
  <div class="color-option" data-color="蓝色"></div>
</div>

<!-- 第二组：颜色选择器 + 输入框 -->
<input type="text" id="colorInput2" placeholder="选择颜色2">
<div class="color-picker" id="colorPicker2">
  <div class="color-option" data-color="绿色"></div>
  <div class="color-option" data-color="黄色"></div>
</div>

2. 修改JavaScript事件逻辑 #

方案一：单独绑定每组事件 #

直接为两个面板分别绑定点击事件，精准更新对应输入框：

// 处理第一组颜色选择
document.querySelectorAll('#colorPicker1 .color-option').forEach(option => {
  option.addEventListener('click', () => {
    document.getElementById('colorInput1').value = option.dataset.color;
  });
});

// 处理第二组颜色选择
document.querySelectorAll('#colorPicker2 .color-option').forEach(option => {
  option.addEventListener('click', () => {
    document.getElementById('colorInput2').value = option.dataset.color;
  });
});

方案二：事件委托简化代码 #

如果面板结构一致，可通过父元素区分点击来源，减少重复代码：

document.addEventListener('click', (e) => {
  if (!e.target.classList.contains('color-option')) return;
  
  const parentPicker = e.target.closest('.color-picker');
  const colorName = e.target.dataset.color;

  // 根据面板ID匹配对应输入框
  if (parentPicker.id === 'colorPicker1') {
    document.getElementById('colorInput1').value = colorName;
  } else if (parentPicker.id === 'colorPicker2') {
    document.getElementById('colorInput2').value = colorName;
  }
});

3. 常见错误排查 #

• 检查原代码是否使用了document.querySelectorAll('input')这类全局选择器，一次性获取所有输入框并赋值，这是导致两个输入框同时修改的典型原因。
• 确认颜色选项的data-color属性已正确设置，确保能获取到有效颜色名称。

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