听起来你是在处理表单文本字段的循环取值问题，结合你的学校项目场景（关联地图数据集），我给你几个实用的解决方案，都是实际开发里常用的：

场景1：表单有统一类名/选择器的静态字段 #

如果你的文本字段有统一的类名（比如用来关联数据集的输入框），可以通过选择器批量获取后循环处理：

HTML结构示例 #

<form id="datasetForm">
  <input type="text" class="dataset-input" data-dataset-id="1" placeholder="数据集1的信息">
  <input type="text" class="dataset-input" data-dataset-id="2" placeholder="数据集2的信息">
  <input type="text" class="dataset-input" data-dataset-id="3" placeholder="数据集3的信息">
  <button type="button" onclick="fetchDatasetValues()">获取值</button>
</form>

JavaScript处理代码 #

function fetchDatasetValues() {
  // 获取所有目标输入框
  const inputFields = document.querySelectorAll('.dataset-input');
  
  // 循环遍历每个字段
  inputFields.forEach(field => {
    // 通过data属性拿到关联的数据集ID（和你的地图标记ID对应）
    const targetDatasetId = field.dataset.datasetId;
    // 获取输入框的实际值，trim去掉前后空格
    const fieldValue = field.value.trim();
    
    // 这里可以对接你的地图逻辑，比如更新对应标记的信息
    if (fieldValue) {
      console.log(`数据集${targetDatasetId}的输入值: ${fieldValue}`);
      // 示例：调用你的地图更新函数
      // updateMapMarkerInfo(targetDatasetId, fieldValue);
    }
  });
}

场景2：动态生成的表单字段（比如从数据库渲染） #

如果你的表单字段是循环生成的（比如从数据集数组动态创建），可以在生成时直接绑定事件，或者用事件委托处理：

动态生成字段+实时取值示例 #

// 假设这是你从数据库拿到的数据集列表
const datasets = [
  { id: 1, name: "校园建筑" },
  { id: 2, name: "学生活动点" },
  { id: 3, name: "实验室位置" }
];

const formContainer = document.getElementById('datasetForm');

// 循环生成输入框
datasets.forEach(data => {
  const input = document.createElement('input');
  input.type = 'text';
  input.className = 'dataset-input';
  input.dataset.datasetId = data.id;
  input.placeholder = `输入${data.name}的补充信息`;
  
  // 给每个输入框绑定change事件，实时获取值
  input.addEventListener('change', function() {
    const inputValue = this.value.trim();
    console.log(`${data.name}的最新值: ${inputValue}`);
    // 直接更新对应地图标记的信息
    // updateMapData(data.id, inputValue);
  });
  
  formContainer.appendChild(input);
});

事件委托（适合后续新增字段的场景） #

如果后续可能动态新增输入框，用事件委托不用重复绑定事件：

document.getElementById('datasetForm').addEventListener('change', function(e) {
  // 判断触发事件的元素是目标输入框
  if (e.target.classList.contains('dataset-input')) {
    const datasetId = e.target.dataset.datasetId;
    const value = e.target.value.trim();
    console.log(`数据集${datasetId}的输入值: ${value}`);
    // 执行你的地图逻辑
  }
});

场景3：数组形式的name属性字段 #

如果你的输入框用数组式name（比如name="datasetValues[]"），可以通过表单元素集合处理：

HTML结构 #

<form id="datasetForm">
  <input type="text" name="datasetValues[]" placeholder="值1">
  <input type="text" name="datasetValues[]" placeholder="值2">
  <button type="submit">提交并同步地图</button>
</form>

提交事件处理 #

document.getElementById('datasetForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认表单提交
  
  // 将表单元素转为数组后遍历取值
  const allValues = Array.from(this.elements['datasetValues[]']).map(input => input.value.trim());
  
  allValues.forEach((value, index) => {
    // 这里的index可以对应你的数据集索引（如果顺序一致的话）
    console.log(`第${index+1}个数据集的值: ${value}`);
    // 同步到地图
    // syncMapWithDataset(index+1, value);
  });
});

• 用trim()处理输入值，避免空字符串或空格干扰逻辑
• 用data-*属性存储关联的数据集ID，是关联表单和地图数据的最佳实践，清晰又易维护
• 如果是动态生成的元素，优先用事件委托，避免重复绑定事件导致的性能问题

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