如何在Javascript中通过对象动态填充button的name与value属性

该需求可以实现，你之前嵌套循环失败的原因是嵌套逻辑会让每个按钮都遍历完整的toppings对象，最终所有按钮的属性都会被覆盖为对象最后一组键值对，不需要嵌套，只要将对象转为键值对数组后，通过遍历的索引和按钮集合的下标一一对应赋值即可。

代码示例 #

写法1：普通for循环（兼容性最好） #

let toppings = {
  pepperoni: 0.25,
  meatballs: 0.35,
  mushrooms: 0.35,
  olives: 0.2,
};
let addCart = document.querySelectorAll('.add-cart');
// 将对象转为[[键, 值], [键, 值]]格式的二维数组
let toppingList = Object.entries(toppings);

// 遍历按钮，通过下标匹配对应的键值对
for (let i = 0; i < addCart.length; i++) {
  // 避免对象键值对数量少于按钮数量时报错
  if (i >= toppingList.length) break;
  const [name, value] = toppingList[i];
  addCart[i].name = name;
  addCart[i].value = value;
  // 若需要按钮显示对应配料名和价格，可添加下行代码
  // addCart[i].textContent = `${name} $${value}`
}

写法2：for of 写法 #

let toppings = {
  pepperoni: 0.25,
  meatballs: 0.35,
  mushrooms: 0.35,
  olives: 0.2,
};
let addCart = document.querySelectorAll('.add-cart');
let toppingList = Object.entries(toppings);

// 将节点集合转为数组后，用entries()同时拿到索引和元素
for (const [index, btn] of Array.from(addCart).entries()) {
  if (index >= toppingList.length) break;
  const [name, value] = toppingList[index];
  btn.name = name;
  btn.value = value;
}

注意事项 #

• 建议保证toppings对象的键值对数量和按钮数量一致，避免出现部分按钮未赋值的情况
• 给DOM原生属性赋值时，直接用元素.属性名和元素.setAttribute('属性名', 属性值)两种写法都可以正常生效
• 如果按钮是动态生成的场景，更建议在创建按钮节点时直接赋值name和value，无需后续单独遍历处理

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