如何在JavaScript中为生成的巧克力块元素依次分配imgPos类动态ID

原生JS实现方案 #

核心修改点 #

1. 修正模板节点ID重复问题，原模板中img的id属性改为类名，避免DOM规范冲突：

<template>
  <img class="imgPos visible" src="https://cdn.shopify.com/s/files/1/1061/1924/products/Chocolate_Bar_Emoji_large.png?" onclick='removeMe(this)' >
</template>

2. 调整CSS选择器，将所有#imgPos替换为.imgPos，保证样式正常生效。
3. 修改循环逻辑，克隆节点后手动赋值唯一ID：

for (let y = 0; y < form.height.value; y++) {
  let div = d.createElement("div");
  choc.appendChild(div);
  for (let x = 0; x < form.length.value; x++) {
    const img = q(".imgPos", q("template").content).cloneNode(true);
    // 行优先计算序号，从1开始计数
    const idIndex = y * Number(form.length.value) + x + 1;
    img.id = `imgPos${idIndex}`;
    div.appendChild(img);
  }
}

修改后生成的巧克力块ID会按照imgPos1、imgPos2的规则自动递增，如需按列优先排序，调整idIndex的计算逻辑即可。

React框架实现建议 #

用状态驱动的逻辑会更简洁，无需手动操作DOM克隆节点，核心实现代码如下：

import { useState } from 'react';

const ChocolateGrid = () => {
  const [length, setLength] = useState(1);
  const [height, setHeight] = useState(1);

  const removeMe = (e) => {
    e.target.classList.remove("visible");
  };

  return (
    <div>
      <form>
        预期长度: <input type='number' min={1} max={10} value={length} onChange={(e) => setLength(Number(e.target.value))} />
        预期高度: <input type='number' min={1} max={10} value={height} onChange={(e) => setHeight(Number(e.target.value))} />
        <button type="button">Apply</button>
      </form>
      <div id="choc">
        {Array.from({ length: height }).map((_, y) => (
          <div key={y}>
            {Array.from({ length }).map((_, x) => {
              const idIndex = y * length + x + 1;
              return <img
                key={idIndex}
                id={`imgPos${idIndex}`}
                src="https://cdn.shopify.com/s/files/1/1061/1924/products/Chocolate_Bar_Emoji_large.png?"
                onClick={removeMe}
                className="imgPos visible"
              />
            })}
          </div>
        ))}
      </div>
    </div>
  )
}

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