Austauschen von Bildern (Little Carousel)

Question

Ich habe ein Problem beim Austauschen von zwei Bildern (von Div-Vignette, Div-Gallerie).

Situation: Ich klicke auf ein kleines Bild, dann tausche es es mit dem großen Bild. Hier

ist die HTML

<div id="gallerie"> 
    <img id="first" src="http://lorempicsum.com/futurama/620/350/2"><br/> 
    <div id="vignette"> 
     <img class="second" src="http://lorempicsum.com/futurama/100/100/6"> 
     <img class="second" src="http://lorempicsum.com/futurama/100/100/4"> 
     <img class="second" src="http://lorempicsum.com/futurama/100/100/3"> 
     <img class="second" src="http://lorempicsum.com/simpsons/100/100/2"> 
     <img class="second" src="http://lorempicsum.com/simpsons/100/100/1"> 
     <img class="second" src="http://lorempicsum.com/simpsons/100/100/4"> 
    </div> 
</div> 

Hier ist die JavaScript

document.getElementById("vignette").addEventListener('click', changeSrc); 
    function changeSrc(e) { 
     var images = document.getElementsByClassName("second").src; 
     var first = document.getElementById("first").src; 
     s = e.target.src; 
     first = s; 
     console.log("click"); 
    } 

Im Moment, ich will nicht jQuery verwenden.

Lösung auf einigen Websites verwenden Bilder direkt auf den JS-Code mit einer "Wenn" -Kaskade. Ich denke nicht, dass das für mich effizient ist.

Ich kann vorschlagen, eine for-Schleife mit dem "var image" zu verwenden, aber ich weiß nicht, wie man das e.target verwendet.

Ich suche nach meinem Code, also könnten Sie mir erklären, warum ich falsch lag? Hier

ist die JsFiddle

https://jsfiddle.net/ws3f4san/

kann ich Ihnen weitere Informationen geben, wenn Sie wollen.

Answer 1

In diesem Codeblock wird die Quelle nicht tatsächlich festgelegt. Sie überschreiben lediglich die Quelle, die Sie als Zeichenfolge in der Variablen first gespeichert haben.

var images = document.getElementsByClassName("second").src; 
var first = document.getElementById("first").src; 
s = e.target.src; 
first = s; 

first = s; wird auf der Seite keine Auswirkungen haben, da Sie nur ein JS-Variable zu ändern, nicht ein DOM-Element.

Sie benötigen die eigentliche Quelle Attribut zu bearbeiten, können Sie dies tun, indem das DOM-Element zu speichern anstelle des ursprünglichen src Wert in der first Variable, etwa so:

var images = document.getElementsByClassName("second").src; 
var first = document.getElementById("first"); // Store the dom element, not the string value 
s = e.target.src; 
first.src = s; // Now assign the new value to the src attribute of your stored dom element 

Edited bei gründlicher sah zu haben, was du versuchst zu tun, du kannst die src's wie folgt austauschen:

function changeSrc(e) { 
    // Get the initial dom element 
    var mainItem = document.getElementById("first"); 
    // Save it's src before it's changed 
    var mainItemImage = mainItem.src; 
    // Get the clicked element 
    var clickedItem = e.target; 
    // Set the first image to the second image 
    mainItem.src = clickedItem.src; 
    // Set the second image to the first image's original value (which has now changed) 
    clickedItem.src = mainItemImage; 
}