javascript - 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');

这是一个包含我用来重新排列的函数的 fiddle 。上面一行在第 91 行。

https://jsfiddle.net/4o17Ldxu/

在 fiddle 中，单击“生成交换列表”并查看浏览器控制台，您会看到它告诉您哪些图像应该交换到哪里，那里的一切都很完美，但是当您再次单击按钮并单击“现在重新排列”，它会导致所有故障。

有什么办法可以防止这种情况发生吗？或者是否有更好的方法来以这种方式交换/重新排列图像？

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多张图片。