Question

我一直在试图弄清楚如何重新安排照片的顺序。但它们必须符合正确的功能。我似乎无法弄明白。如果您有三张照片：

<img id='slot1' src="img1.jpg" onClick="function1();">
<img id='slot2' src="img2.jpg" onClick="function2();">
<img id='slot3' src="img3.jpg" onClick="function3();">

我可以重新排序实际图像，但如何重新排序图像及其相关功能？

例如，当点击img1.jpg时，它应该始终运行function1（），无论它们处于什么顺序。谢谢

编辑：最初，我没有正确发布代码。

Answer 1

肯定有比这更优雅的方法，但是如果您只是简单地交换图像源，您可以使用onclick事件完全相同。

var temp=document.getElementById('slot1').onclick;
document.getElementById('slot1').onclick=document.getElementById('slot2').onclick;
document.getElementById('slot2').onclick=temp;

Answer 2

假设您已动态更改了图像的src，这是一个简单的代码

HTML

<img id="slot1" src="http://chandra.harvard.edu/graphics/photo/high_res_thm.jpg"  onclick="function1()">
<img id="slot2" src="http://umbra.nascom.nasa.gov/images/latest_mk4_icon.gif"  onclick="function2()">
<input type="button" id="button" onclick="shuffleImages()" value="Click"/>

的Javascript

function shuffleImages() 
{
  var src1 = document.getElementById("slot1").getAttribute('src');
  var src2 = document.getElementById("slot2").getAttribute('src');
  var click1 = document.getElementById("slot1").getAttribute('onclick');
  var click2 = document.getElementById("slot2").getAttribute('onclick');
  document.getElementById("slot1").setAttribute("src", src2);
  document.getElementById("slot1").setAttribute("onclick", click2);
  document.getElementById("slot2").setAttribute("src", src1);
  document.getElementById("slot2").setAttribute("onclick", click1);
}

这是一个简单的演示： - https://jsfiddle.net/900d62dL/ 注意：上面提供的解决方案很好并且已经过优化。此演示仅供您理解。

HTML5重新排列元素

2 个答案: