关于 jQuery 用类添加图片

Question

好的，让我们使用 jQuery，使用类看起来更动态......所以根据效果添加类，并且应该为 div 添加背景。

const iconHover = function() {
    const moveLeft = -305;
    const moveDown = 3;

    if (setup.battle.enemies[0]) {
        setup.battle.enemies[0].tempEffect.forEach((effect: effectInterface, index: number) => {
            const _icon = $('#grid-item-' + index);

            _icon.addClass(effect.iconClass)
        });
    }

    for (let i = 0; i < 4; i++) {
        $('#grid-item-' + i).hover(() => {
            $('div#icon_' + i).show()
        }, function() {
            $('div#icon_' + i).hide()
        })

        $('#grid-item-' + i).mousemove(event => {
            $("div#icon_" + i)
                .css('top', event.pageY + moveDown)
                .css('left', event.pageX + moveLeft)
        })
    }
}

这在理论上可行，考虑到它将类添加到所需的元素，这是一个角色的效果图标网格。

<div class="iconContainer">
        <div id="grid-item-0"></div>
        <div id="grid-item-1"></div>
        <div id="grid-item-2"></div>
        <div id="grid-item-3"></div>
        <div id="grid-item-4"></div>
</div>

类被正确添加到图标div中，并且src图像正确返回。

.superiorFlame {
    background: url("img/icons/superiorFlame.png") no-repeat center center fixed;
    background-size: cover;
}

但是在 div 中，即使使用类，这似乎也不起作用。

Pic1

添加了元素的网格 console.log。

Console

Answer 1

这不是解决方案，如果没有解决方案我会删除，但更容易显示代码 似乎问题出在绑定 mousemove 上，您能否评论一下绑定并看看发生了什么..

    $('#grid-item-' + i).mousemove(event => {
        $("div#icon_" + i)
            .css('top', event.pageY + moveDown)
            .css('left', event.pageX + moveLeft)
    })