如何將新圖像拼接到我要刪除的圖像所在的同一 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);