尝试在悬停时将JavaScript数组中的图像添加到DOM

好吧，这个问题可能有点复杂。本质上，我试图制作一种JavaScript字符选择屏幕。我的UI都设置好了，我的图像都用HTML编码到DOM中

我所做的是将每个字符各自的精灵图像放入一个JavaScript对象中

我想做的是，当用户将鼠标悬停在字符选择图像上（在我称为“sprite容器”的容器内）时，让字符sprite图像显示在字符选择屏幕的一侧

我有这样的HTML

        <div class="container character-container">
        <div class="row">
            <img src="assets/images/characters/sfa2_ryu.gif" alt="Ryu" class="character" id="Ryu" onclick="showRyu()">
            <img src="assets/images/characters/sfa2_adon.gif" alt="Adon" class="character" id="Adon">
            <img src="assets/images/characters/sfa2_chunli.gif" alt="Chun" class="character" id="Chun">
            <img src="assets/images/characters/sfa2_guy.gif" alt="Guy" class="character" id="Guy">
            <img src="assets/images/characters/sfa2_ken.gif" alt="Ken" class="character" id="Ken">
        </div>
        <div class="row">
            <img src="assets/images/characters/sfa2_dhalsim.gif" alt="Dhalsim" class="character">
            <img src="assets/images/characters/sfa2_gen.gif" alt="Gen" class="character">
            <img src="assets/images/characters/sfa2_sakura.gif" alt="Sakura" class="character">
            <img src="assets/images/characters/sfa2_rolento.gif" alt="Rolento" class="character">
            <img src="assets/images/characters/sfa2_zangief.gif" alt="Zangief" class="character">
        </div>
        <div class="row">
            <img src="assets/images/characters/sfa2_charlie.gif" alt="Charlie" class="character">
            <img src="assets/images/characters/sfa2_birdie.gif" alt="Birdie" class="character">
            <img src="assets/images/characters/sfa2_rose.gif" alt="Rose" class="character">
            <img src="assets/images/characters/sfa2_sodom.gif" alt="Sodom" class="character">
            <img src="assets/images/characters/sfa2_sagat.gif" alt="Sagat" class="character">
        </div>
        <div class="row">
            <img src="assets/images/characters/sfa2_akuma.gif" alt="Akuma" class="character">
            <img src="assets/images/characters/sfa2_bison.gif" alt="Bison" class="character">
            <img src="assets/images/characters/sfa2_dan.gif" alt="Dan" class="character">
        </div>
    </div>
    <div class="row">
        <div class="col">
        <div class="sprite-container" id="sprite-container">
            <img src="" alt="" width="15%">
        </div>
    </div>
    <script src='app.js'></script>
</body>
</html>

---

不确定这是否可能。。。任何帮助都将不胜感激

为了开始，您可以使用

onmouseover

事件侦听器。 例如，可以创建设置容器的函数：

// add an Id to the image under the sprite container
var image = document.getElementById("sprite-item");
function changeContainer(url){
    image.src = url;
}

然后在HTML中，可以添加属性：

<img src="assets/images/characters/sfa2_ryu.gif" alt="Ryu" class="character" id="Ryu" onmouseover="changeContainer("assets/images/sprites/RyuSprite.gif")">

---

好消息：这是可能的

一般来说，这只是在角色选择屏幕上添加一个mouseover和mouseout事件侦听器，找出当前悬停的元素并相应地更新预览。不过，我们希望以一种有效的方式做到这一点

查看您的DOM结构，您已经将属于

中的字符选择的任何内容与类容器字符容器分组。 我们可以使用以下方法获取对此容器的引用：

var container = document.getElementsByClassName("container character-container")[0];

container.addEventListener('mouseover', function(e) {

});

getElementsByClassName函数返回一个HTMLCollection，它本质上是一个数组。由于该类只有一个对象，我们可以通过附加

[0]

直接访问该对象

现在，我们可以使用以下方法连接鼠标悬停事件侦听器：

var container = document.getElementsByClassName("container character-container")[0];

container.addEventListener('mouseover', function(e) {

});

当用户将鼠标移动到容器内的任何对象上时，此事件将立即触发

不幸的是，我们只对

var obj = Sprites.find(o => o.name == e.target.id);

下面是一个基于您的代码的分条示例：


const精灵=[{
id:0，
姓名：“Ryu”，
img:'https://picsum.photos/id/1/200/300'
},
{
id:2，
姓名：“阿东”，
img:'https://picsum.photos/id/2/200/300'
},
{
id:3，
姓名:"春",，
img:'https://picsum.photos/id/3/200/300'
},
{
id:4，
姓名：“盖伊”，
img:'https://picsum.photos/id/4/200/300'
},
{
id:5，
姓名：“肯”，
img:'https://picsum.photos/id/5/200/300'
}
];
var container=document.getElementsByClassName（“容器字符容器”）[0]；
container.addEventListener（'mouseover'，函数（e）{
如果（e.target.tagName==“IMG”）{
var obj=Sprites.find（o=>o.name==e.target.id）；
document.getElementById（“preview”）.src=obj.img；
}
});
container.addEventListener（'mouseout'，函数（e）{
document.getElementById（“预览”）.src=null；
});