JSと簡単なイメージスワップを行う方法は？

Question

私はIntro to Programming ConceptsクラスのJavascriptを学んでいます。私は最終プロジェクトのための簡単なフォトポートフォリオサイトを作ることにしました。私は今ギャラリーを作っているし、どうやってイメージを交換するのか分からない。

これは（カットオフが、あなたのアイデアを得る）のようにそれが見えるものです： screenshot

これはHTMLです：

<div id="gallery"> 
<div> 
    <img src="images/nature/1.jpg"> 
    <br> 
    <div class="gallery"> 
    <img src="images/nature/2.jpg"> 
    <img src="images/nature/3.jpg"> 
    <img src="images/nature/4.jpg"> 
    <img src="images/nature/5.jpg"> 
    <img src="images/wedding/1.jpg"> 
    <img src="images/wedding/2.jpg"> 
    <img src="images/wedding/3.jpg"> 
    <img src="images/wedding/5.jpg"> 
    <img src="images/wedding/4.jpg"> 
    </div> 
</div> 
</div> 

あなたからIMGをクリックしたときに、私はそれを作るにはどうすればよいです.galleryそれは最初のimg（images/nature/1.jpg）で置き換えられますか？

Answer 1

スワイプのdivをクリックすると、.galleryに表示されている画像が1.jpgに置き換えられても、そのことを意味すると思います。

.galleryにonclickイベントをバインドし、event objectを取得すると、イベントをトリガーするソースDOM要素にアクセスできます。

次に、javascriptを使用してsrc属性を変更できます。

var gallery = document.querySelector('.gallery'); 
gallery.addEventListener('click', function(e) { 
    var targetImg = e.target; 
    targetImg.src = 'images/nature/1.jpg'; 
}); 

Answer 2

最初の画像に現在あるものは何でも画像取得し、クリックされたものと、それを交換する必要があり、次の

var firstImage = document.getElementsByTagName('img')[0], 
    gallery = document.getElementsByClassName('gallery')[0]; 

gallery.addEventListener('click', function(e) { 
    var target = e.target; 

    if (target.tagName == "IMG") { 
    var newImage = target.src; 
    target.src = firstImage.src; 
    firstImage.src = newImage; 
    } 
}); 

はあなたがここでそれを試すことができます。https://jsfiddle.net/hxhe90qL/6/

後しかし、周りを十分にクリックすると、画像はおそらくすべて順不同になります。 ifステートメント内のコードを次のように置き換えて、最初の画像のみを交換することができます。

firstImage.src = target.src;