jQuery重新排列/交換img src導致照片重新加載時出現故障

Question

我不確定最好的方法是什么，但是在頁面上加載多個圖像后，必須更改它們的src屬性。 可以這么說，我需要重新排列它們。

它們以原始格式顯示如下：

1    5    9
2    6    10
3    7    11
4    8    12

我編寫了一個jQuery函數，將它們像這樣重新排列：

1    2    3
4    5    6
7    8    9
10   11   12

從理論上講，這種重新排列工作正常，但是當需要實際更改圖像的src時，它會多次重新加載同一圖像以及其他奇怪行為。

這就是我更改src

$('img[src="image.png"]').attr('src', 'newimage.png');

這是一個小提琴，其中包含我用來重新排列的功能。 上面的行在第91行。

https://jsfiddle.net/4o17Ldxu/

在小提琴中，單擊“生成交換列表”，然后在瀏覽器控制台中查看，它會告訴您應該在哪里交換哪些圖像，一切都完美，但是當您再次單擊按鈕並單擊“現在重新排列”時它會引起所有故障。

反正有防止這種情況發生的方法嗎？ 還是有更好的方法來以這種方式交換/重新排列圖像？

Answer 1

我認為問題在於您實際上不是在“交換”圖像-您將第一個圖像設置為等於第二個圖像，而第二個圖像保持不變。 例如，您的代碼記錄：

Swap Photo 4 with Photo 2

但是它實際上在做的是：

$('img[src="image.png"]').attr('src', 'newimage.png');

完成此操作后，頁面中將有兩個<img>標記，它們與選擇器img[src="newimage.png"]匹配。 在隨后的步驟中，如果嘗試使用src="newimage.png"選擇所有圖像，最終將替換多個圖像的src 。