HTML5 Elemente neu anordnen

Question

Ich habe versucht, herauszufinden, wie Sie die Reihenfolge der Fotos neu anordnen. Sie müssen jedoch der richtigen Funktion entsprechen. Ich kann es nicht herausfinden. Wenn Sie drei Fotos wie diese:

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

Ich kann das eigentlich Bild neu zu ordnen, aber wie kann ich wieder, um das Bild und die dazugehörigen Funktion?

Wenn zum Beispiel img1.jpg klicken, soll es immer laufen function1(), unabhängig davon, in welcher Reihenfolge sie sind in Dank

Edit:. Ursprünglich, ich habe den Code nicht richtig schreiben.

Answer 1

Hier sehen wir einen weiteren Grund, keine aufdringlichen Inline Event Handler zu verwenden. Ändern Sie HTML

<div class="image-container"> 
    <img id='slot1' src="img1.jpg" /> 
    <img id='slot2' src="img2.jpg" /> 
    <img id='slot3' src="img3.jpg" /> 
</div> 

und befestigen Ereignis wie folgt aus:

var container = document.querySelector('.image-container') 
container.addEventListener('click', function(e) { 
    if (e.target.tagName === 'IMG') { 
    // find the index of e.target 
    // call function1,2 or 3 depending on index 
    } 
}) 

Wie den Index zu finden: überprüfen Sie diese answer.

Hier ist eine kurze Demo: https://jsfiddle.net/th174cnz/.

Answer 2

Es gibt definitiv elegantere Methoden als diese, aber wenn Sie einfach die Bildquellen wechseln, können Sie genau das gleiche mit dem onclick-Ereignis tun.

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

Answer 3

Unter der Annahme, dass Sie die src des Bildes geändert haben dynamisch ist dies eine einfache Code

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); 
} 

hier ist die einfache Demo: - https://jsfiddle.net/900d62dL/ Hinweis: Die oben angegebene Lösung ist gut und optimiert. Diese Demo ist nur für Ihr Verständnis.