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行。

在小提琴中，点击＆＃34;生成交换列表＆＃34;并且在您的浏览器控制台中查看，您会看到它会告诉您哪些图像应该交换到哪里，一切都很完美，但是当您再次单击该按钮并单击＆＃34;现在重新排列＆＃34;它引起了所有的故障。

反正有没有阻止这个？或者有更好的方法来以这种方式交换/重新排列图像？

Answer 1

我认为问题在于你实际上并没有“交换”＃34;图像 - 您将第一张图像设置为等于秒，并保持第二张图像不变。例如，您的代码记录：

Swap Photo 4 with Photo 2

但它实际做的是：

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

此操作完成后，您的页面中将有两个<img>标记与选择器img[src="newimage.png"]匹配。在后续步骤中，如果您尝试使用src="newimage.png"选择所有图像，则最终会替换多个图像的src。