Как сделать простой обмен изображениями с JS?

Question

Я изучаю 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

Я думаю, что вы имеете в виду, когда вы нажимаете на сабвуфер, независимо от того, какой рисунок отображается в .gallery, будет заменен на 1.jpg.

Если это так, вы можете привязать событие onclick на .gallery, получив event object, вы можете получить доступ к элементу dom 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;