Question

我正在编写一个小型JavaScript游戏。

我正在看的代码是：

cells[i].onmouseover = function() {
        cells[i].style.top =
        (cells[i].getAttribute('data-top') - 25).toString() + "px";
    }

每个cell [i]元素都是<img>元素数组的成员。

目前，每当我将鼠标悬停在img元素上时，都会产生以下错误：

Uncaught TypeError: Cannot read property 'style' of undefined

我无法解决正在发生的事情。为什么cells[i]未定义？

以下是所有可能相关的代码：

for(var i = 0; i < mapSize; ++i) {
    cells[i] = document.createElement('img');
    cells[i].src = 'base1.png';
    cells[i].class = 'base1';
    cells[i].id =  'cell' + i;

    game.appendChild(cells[i]);

    row = Math.floor(i / mapWidth);

    top = tops[i%mapWidth + row];
    left = lefts[mapWidth + (i % mapWidth) - row];

    cells[i].setAttribute('data-top',top);
    cells[i].setAttribute('data-left',left);

    cells[i].style.top = top.toString() + "px";
    cells[i].style.left = left.toString() + "px";
    cells[i].style.zindex = i;

    console.log(cells[i]);

    cells[i].onmouseover = function() {
        cells[i].style.top =
        (cells[i].getAttribute('data-top') - 25).toString() + "px";
    }
}

Answer 1

这应该有用......

cells.each(function(key, index){
    var _this = $(this);
    _this.mouseover(function() {
        var top = _this.data("top") - 25;
        $(this).css("top",top);
    });
})

将onmouseover事件绑定到数组中的多个元素

1 个答案: