イメージをスワップする（小さなカルーセル）

Question

2つのイメージを交換する際に問題があります（divビネットからdivギャラリーへ）。

状況：小さな画像をクリックして大きな画像に置き換えます。ここで

はここ 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> 

瞬間のために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"); 
    } 

であり、私はjQueryのを使用する必要はありません。

解決策一部のWebサイトでは、「if」カスケードを使用してJSコードで直接画像を使用しています。私はそれが私にとって効率的だとは思わない。

私は "var image"でforループを使うことを提案できますが、e.targetの使い方はわかりません。

私のコードを実行するために検索するので、なぜ私が間違っていたのか説明できますか？ここで

は、あなたがしたい場合、私はあなたより多くの詳細を与えることができJsFiddle

https://jsfiddle.net/ws3f4san/

です。

Answer 1

このコードブロックでは、実際にソースを設定していないので、変数としてfirst変数に文字列として保存したソースを上書きするだけです。

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

first = s;あなただけのJS変数ではなく、DOM要素を変更しているので、ページには影響しません。

あなたがそうのように、あなたの代わりにfirst変数で初期src値のDOM要素を格納することによって行うことができ、実際のソース属性を編集する必要があります。

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 

編集が何でもっと徹底的に調べましたあなたはしようとしている、あなたはこのようにsrcのスワップできます：

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