如何获取多个输入框值并追加到div？当前仅能获取第一个值

嘿，你的问题核心在于没有遍历所有输入框，而且还有两个小细节没注意到，我帮你一步步理清楚：

先指出你代码里的两个小错误 #

1. 类选择器少了.：jQuery里找类元素必须加.，比如$(".o-exercise__button--calculated")，否则它会以为你在找叫<o-exercise__button--calculated>的HTML标签，根本绑定不上点击事件。
2. 追加目标错了：你原来写的$("o-money__answer").append(...)是把结果div加到输入框里面，这显然不是你想要的，得指定一个专门的容器（比如一个class为calculatedSection的div）来放这些结果。

正确的实现：用.each()遍历每个输入框 #

你确实需要用.each()来循环所有输入框，这样才能拿到每个输入框的值，而不是只取第一个。修改后的代码如下：

function getInputValues() {
  // 修正类选择器，绑定按钮点击事件
  $(".o-exercise__button--calculated").on('click', function () {
    // 遍历所有带.o-money__answer类的输入框
    $(".o-money__answer").each(function() {
      // $(this)指向当前正在遍历的输入框，获取它的值
      const inputValue = $(this).val();
      // 把值追加到结果容器里（这里假设你的结果容器是.calculatedSection）
      $(".calculatedSection").append(`<div class="calculatedSectionAmount">${inputValue}</div>`);
    });
  });
};

// 确保DOM加载完成后再执行函数
$(document).ready(function() {
  getInputValues();
});

更高效的写法：用.map()批量处理 #

如果输入框数量较多，一次性处理所有值再追加会更高效（减少DOM操作次数），可以用.map()来实现：

function getInputValues() {
  $(".o-exercise__button--calculated").on('click', function () {
    // 遍历输入框，生成所有要追加的HTML字符串
    const resultHtml = $(".o-money__answer").map(function() {
      return `<div class="calculatedSectionAmount">${$(this).val()}</div>`;
    }).get().join(''); // 把jQuery对象转成数组，再拼成完整字符串
    
    // 一次性追加到容器
    $(".calculatedSection").append(resultHtml);
  });
};

$(document).ready(function() {
  getInputValues();
});

为什么原来的代码只重复第一个值？ #

因为$(".o-money__answer").val()默认只会返回第一个匹配元素的值，所以你每次点击都只会把第一个输入框的值重复追加N次（N是输入框数量）。用.each()或.map()遍历后，才能拿到每个输入框的独立值。

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