如何将新图像拼接到我要删除的图像所在的同一 position 中的数组中并显示此图像

Question

我有一系列图像。 每个图像都是可点击的并生成一条消息。图像位于随机数组中。 这一切都很好。 我未能实现的是：单击图像时，它变得过时了，所以我想用一个新的、不可点击的图像替换可点击的图像。 我尝试使用 array.splice 方法如下 newArray=myImages.splice(evt.target,1,newImage) 这将新图像放置在新数组中的 position 0 而不是其原始 position 中，并且不会生成新图像覆盖旧图像。 如果有任何帮助，我将不胜感激。

Answer 1

如果我们猜测newArray=myImages.splice(evt.target,1,newImage)中的evt是一个事件 object， evt.target是一个DOM 元素，而不是索引。 如果这是在您描述的点击事件中，它将是点击的图像。

splice的第一个参数是进行更改的索引； 一个号码。 DOM 元素不是数字。

splice还返回一个已删除图像的数组，而不是更新的数组。 （与map或slice等方法不同， splice会修改您调用它的数组。）

您可以使用indexOf找到上一张图像的索引，然后我们将其splice ：

const index = myImages.indexOf(evt.target);
if (index !== -1) {
    myImages.splice(index, 1, newImage);
}

或者您可以使用map创建一个新数组，其中包含新图像来代替单击的图像：

newArray = myImages.map(img => img === evt.target ? newImage : img);