如何在jQuery中点击按钮获取动态输入框ID并赋值给另一按钮？

嘿，刚接触JavaScript和jQuery完全不用慌～我来一步步帮你实现这个需求，其实逻辑很清晰，咱们一步步来：

首先明确需求：点击一个按钮，收集所有带bulk-pricing-streetProgressBar类的输入框的ID，然后把这些ID保存到另一个按钮上（可以是显示在按钮上，或者存为按钮的自定义数据）。

jQuery 版本（适合你提到的jQuery新手场景） #

先给你写最贴合jQuery的实现，代码注释很详细，你跟着改就行：

// 等页面所有元素加载完成后再执行代码
$(document).ready(function() {
  // 给「触发收集ID」的按钮绑定点击事件（这里假设按钮ID是getIdsBtn，你要改成自己的按钮ID）
  $('#getIdsBtn').click(function() {
    // 1. 选中所有目标输入框：通过类名bulk-pricing-streetProgressBar筛选
    // 2. 遍历每个输入框，取出它们的ID，存成数组
    const inputIds = $('.bulk-pricing-streetProgressBar').map(function() {
      return this.id; // 每个输入框的id属性
    }).get(); // 把jQuery的结果转成普通JS数组
    
    // 把数组转成逗号分隔的字符串，方便显示
    const idsText = inputIds.join(', ');
    
    // 接下来把ID保存到另一个按钮（假设按钮ID是saveIdsBtn），两种方式可选：
    // 方式1：直接把ID显示在按钮的文本上
    $('#saveIdsBtn').text(`已收集的输入框ID：${idsText}`);
    
    // 方式2：把ID数组存到按钮的自定义数据属性里（适合后续JS逻辑调用，不会显示在页面）
    $('#saveIdsBtn').data('storedInputIds', inputIds);
  });

  // 可选：如果你想验证保存的数据，给保存按钮加个点击事件，打印到控制台
  $('#saveIdsBtn').click(function() {
    const savedIds = $(this).data('storedInputIds');
    console.log('保存的输入框ID列表：', savedIds);
  });
});

关键部分解释： #

• $(document).ready()：确保页面所有DOM元素加载完成后再执行代码，避免找不到按钮或输入框
• $('.bulk-pricing-streetProgressBar')：不管你有多少个动态生成的输入框，只要带这个类名，都能被选中
• .map()：遍历每个选中的输入框，提取它们的id属性
• .data()：jQuery提供的便捷方法，用来给元素绑定内存数据，不会修改HTML结构，适合后续使用

原生JavaScript 版本（如果不想依赖jQuery） #

要是你之后想慢慢过渡到原生JS，这个版本也能实现同样的功能：

// 等DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  const getBtn = document.getElementById('getIdsBtn');
  const saveBtn = document.getElementById('saveIdsBtn');

  getBtn.addEventListener('click', function() {
    // 选中所有目标输入框
    const inputBoxes = document.querySelectorAll('.bulk-pricing-streetProgressBar');
    // 把NodeList转成数组，再提取ID
    const inputIds = Array.from(inputBoxes).map(box => box.id);
    const idsText = inputIds.join(', ');

    // 方式1：显示在按钮文本
    saveBtn.textContent = `已收集的输入框ID：${idsText}`;
    
    // 方式2：存到自定义数据属性（会在HTML里显示，适合后续读取）
    saveBtn.dataset.storedInputIds = JSON.stringify(inputIds);
  });

  // 验证保存的数据
  saveBtn.addEventListener('click', function() {
    const savedIds = JSON.parse(this.dataset.storedInputIds);
    console.log('保存的输入框ID列表：', savedIds);
  });
});

注意事项： #

1. 记得把代码里的getIdsBtn和saveIdsBtn改成你实际的按钮ID
2. 因为输入框是动态生成的，我们是点击按钮时才去查找输入框，所以不管什么时候生成的输入框，都能被收集到，不用担心动态生成的问题
3. 如果需要保存的是数组格式（不是字符串），用JSON.stringify和JSON.parse来处理，避免数据丢失

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