将jQuery版createTiles函数转为原生JavaScript遇问题求助

错误根源 #

你写的代码存在两个关键问题：

1. 方法名拼写错误：document.getElementbyClassName应为document.getElementsByClassName（注意Element是复数形式Elements）。
2. 逻辑错误：你是在创建新的.tile元素，而非查找页面已存在的元素——此时新元素还未添加到DOM中，用getElementsByClassName根本找不到它；而且该方法返回的是元素集合（HTMLCollection），不是单个元素，直接访问style自然会报undefined错误。

完整原生JavaScript替代代码 #

直接对应原jQuery逻辑，创建元素后直接操作该元素属性，无需查找：

export function createTiles() {
    const gameContainer = document.getElementById('game');
    for (let counter = 0; counter < coordinates.length; counter++) {
        const coord = coordinates[counter];
        const [x,y,z] = coord;
        const image = images[counter];

        // 创建tile元素，对应原jQuery的$("<div></div>")
        const tile = document.createElement('div');
        tile.classList.add('tile');
        // 设置样式，对应原.css()方法
        tile.style.left = `${x * tileWidth + tileDepth * z + tileOffsetLeft}px`;
        tile.style.top = `${y * tileHeight + tileDepth * z + tileOffsetTop}px`;
        tile.style.zIndex = z;

        // 创建tileFront元素
        const tileFront = document.createElement('div');
        tileFront.classList.add('tileFront');
        tileFront.style.width = `${tileWidth}px`;
        tileFront.style.height = `${tileHeight}px`;
        tileFront.style.borderRadius = `${tileRoundness}px`;
        tileFront.append(image);

        // 组装元素并添加到游戏容器
        tile.append(tileFront);
        gameContainer.append(tile);
    }
}

关键对应点 #

• $("<div></div>") → document.createElement('div')
• .addClass("className") → element.classList.add('className')
• .css({...}) → 直接设置element.style.xxx，或用Object.assign(element.style, {...})批量设置
• .append(child) → element.append(child)
• .appendTo("#game") → document.getElementById('game').append(element)

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