如何在HTML中以productId为键将quantity数组值存入目标对象？

没问题，我来帮你实现这个需求！要完成每次提交时把产品ID和数量追加到目标对象里，咱们可以分几步来做：

1. 初始化存储对象 #

首先得声明一个能持续保存数据的对象，要放在点击事件外面（比如全局作用域或者模块作用域），不然每次点击都会重置数据：

// 初始化存储对象，用来保存产品ID和对应数量
let productQuantities = {};

2. 绑定提交按钮的点击事件 #

给你的提交按钮绑定点击事件，在事件处理函数里完成数据的获取、转换、校验和存储：

假设你的提交按钮是这样的：

<button id="submitBtn">提交</button>

对应的JS代码：

$("#submitBtn").on("click", function() {
  // 获取并转换产品ID为数字（input的val()返回字符串，必须转成数字作为键）
  const productId = Number($("#productId").val());
  // 获取并转换数量为数字
  const quantity = Number($("#quantity").val());

  // 校验输入的有效性：确保两个值都是合法数字，且数量大于0（可根据业务调整）
  if (!isNaN(productId) && !isNaN(quantity) && quantity > 0) {
    // 方式1：如果同一个产品ID再次提交，**覆盖**原有数量
    productQuantities[productId] = quantity;

    // 方式2：如果同一个产品ID再次提交，**累加**数量（比如多次提交同一产品，数量叠加）
    // productQuantities[productId] = (productQuantities[productId] || 0) + quantity;

    // 可选：提交后清空数量输入框，方便下次输入
    $("#quantity").val("");
    // 调试用：打印当前存储的数据，看看效果
    console.log("当前存储的产品数量数据：", productQuantities);
  } else {
    // 输入无效时提示用户
    alert("请输入有效的产品ID和数量哦！");
  }
});

关键细节说明 #

• 数字转换：一定要用Number()把输入值转成数字，因为<input type="number">的val()方法返回的是字符串类型，直接作为对象键的话会是字符串（比如"5"），转成数字后才符合你示例里的数字键格式。
• 有效性校验：加入!isNaN()判断可以避免把无效的输入（比如空值、非数字字符）存入对象，保证数据的合法性。
• 追加逻辑：
  • 用方式1时，同一个产品ID再次提交会覆盖之前的数量；
  • 用方式2时，会自动累加已有产品的数量（第一次提交时因为键不存在，productQuantities[productId]会是undefined，|| 0就会取0，再加上新数量）。

这样每次点击提交按钮，就能把当前的产品ID和数量正确追加到目标对象里啦！

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