如何使用Jquery/Javascript从生成的文本字段获取乘法计算结果？

嘿，我来帮你搞定这个多组文本字段相乘的需求！下面是一套完整的实现方案，不管是静态预设多组还是支持动态添加新组，都能满足你的要求：

• 每组用一个容器包裹三个输入框：乘数1、乘数2、计算结果（结果框设为只读，防止手动修改）
• 监听输入框的input事件，实时触发计算逻辑，把乘积填充到结果框
• 处理非数字输入的边界情况，避免出现NaN这类异常结果

HTML 结构 #

<div class="container">
  <!-- 预设第一组 -->
  <div class="field-group">
    <input type="number" class="num1" placeholder="乘数1" />
    <span>×</span>
    <input type="number" class="num2" placeholder="乘数2" />
    <span>=</span>
    <input type="number" class="result" placeholder="结果" readonly />
  </div>

  <!-- 预设第二组 -->
  <div class="field-group">
    <input type="number" class="num1" placeholder="乘数1" />
    <span>×</span>
    <input type="number" class="num2" placeholder="乘数2" />
    <span>=</span>
    <input type="number" class="result" placeholder="结果" readonly />
  </div>

  <!-- 动态添加组的按钮 -->
  <button id="add-group-btn">添加新的计算组</button>
</div>

CSS 样式（可选，让界面更清晰） #

.container {
  max-width: 600px;
  margin: 20px auto;
  padding: 0 20px;
}

.field-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

input {
  padding: 8px 10px;
  width: 120px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.result {
  background-color: #f5f5f5;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

JavaScript 逻辑 #

// 计算单组乘积的函数
function calculateGroup(groupElement) {
  const num1Input = groupElement.querySelector('.num1');
  const num2Input = groupElement.querySelector('.num2');
  const resultInput = groupElement.querySelector('.result');

  // 处理非数字输入，默认转为0
  const num1 = parseFloat(num1Input.value) || 0;
  const num2 = parseFloat(num2Input.value) || 0;

  resultInput.value = num1 * num2;
}

// 给现有组绑定事件
document.querySelectorAll('.field-group').forEach(group => {
  // 监听两个乘数输入框的输入事件
  group.querySelectorAll('.num1, .num2').forEach(input => {
    input.addEventListener('input', () => calculateGroup(group));
  });
});

// 动态添加新组的功能
document.getElementById('add-group-btn').addEventListener('click', () => {
  const container = document.querySelector('.container');
  // 创建新的组元素
  const newGroup = document.createElement('div');
  newGroup.className = 'field-group';
  newGroup.innerHTML = `
    <input type="number" class="num1" placeholder="乘数1" />
    <span>×</span>
    <input type="number" class="num2" placeholder="乘数2" />
    <span>=</span>
    <input type="number" class="result" placeholder="结果" readonly />
  `;

  // 给新组的输入框绑定事件
  newGroup.querySelectorAll('.num1, .num2').forEach(input => {
    input.addEventListener('input', () => calculateGroup(newGroup));
  });

  // 把新组添加到容器中（按钮之前）
  container.insertBefore(newGroup, document.getElementById('add-group-btn'));
});

• 用type="number"的输入框可以限制用户只能输入数字，减少异常输入的情况
• 计算时用parseFloat(...). || 0处理空值或非数字输入，避免出现NaN
• 动态添加的组也会自动绑定计算事件，无需额外手动处理

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