如何按顺序向每个客户的itemSold字段中添加内容？

实现思路 #

按照需求的填充逻辑，我们预先定义好固定的填充优先级序列：先填第1个客户的第1个itemSold位置，再填第2个客户的第1个位置，接着是第1个客户的第2个位置，最后是第2个客户的第2个位置。通过一个指针追踪当前待填充的位置，每次点击按钮时，根据指针找到对应的客户和索引，将选中的商品填入，之后指针自动推进到下一个位置。

完整代码实现 #

<div class="productsContainer"></div>

<script>
let customers = [{
    active: true,
    id: 1,
    product: {
      itemSold: [null, null],
    },
  },
  {
    active: true,
    id: 2,
    product: {
      itemSold: [null, null],
    },
  },
];

let products = [
  {id:1,name : 'car'},
  {id:2,name : 'home'},
  {id:3,name : 'phone'},
  {id:4,name : 'fly'},
];
let productsContainer = document.querySelector(".productsContainer");

// 生成商品按钮
let productHTML = ``;
products.map((product) => {
  return (productHTML += `<button class="btn btn-outline-dark btn-item" id=${product.id}>${product.name}</button>`);
});
productsContainer.innerHTML = productHTML;

// 定义填充顺序：[客户索引, itemSold数组索引]
const fillSequence = [[0, 0], [1, 0], [0, 1], [1, 1]];
// 当前填充位置的指针，初始为0
let currentFillIndex = 0;

// 为所有按钮添加点击事件
document.querySelectorAll('.btn-item').forEach(btn => {
  btn.addEventListener('click', function() {
    // 检查是否还有可填充的位置
    if (currentFillIndex >= fillSequence.length) {
      alert('所有位置已填满');
      return;
    }
    
    // 获取当前要填充的客户和索引
    const [customerIdx, itemIdx] = fillSequence[currentFillIndex];
    // 获取被点击的商品
    const selectedProduct = products.find(p => p.id === parseInt(this.id));
    
    // 填充itemSold字段
    customers[customerIdx].product.itemSold[itemIdx] = selectedProduct;
    
    // 打印当前状态，方便验证
    console.log('当前客户数据：', JSON.stringify(customers));
    
    // 指针推进到下一个位置
    currentFillIndex++;
    
    // 如果所有位置填满，禁用所有按钮
    if (currentFillIndex >= fillSequence.length) {
      document.querySelectorAll('.btn-item').forEach(b => b.disabled = true);
    }
  });
});
</script>

代码说明 #

• 填充序列：fillSequence数组预先定义了严格的填充顺序，确保完全符合需求的步骤。
• 状态追踪：currentFillIndex变量记录当前待填充的位置，每次点击后自动递增，保证顺序不混乱。
• 点击处理：按钮点击时，先判断是否还有可填充位置，再根据序列找到目标位置填入商品，最后更新指针状态。
• 边界处理：所有位置填满后，弹出提示并禁用所有按钮，避免无效操作。

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