Как сделать так, чтобы при нажатии на картинку она менялась местами с другой картинкой

Question

Как сделать так, чтобы при нажатии на картинку она менялась местами с другой картинкой

Рейтинг: -1Ответов: 2Опубликовано: 12.01.2023

<div class="monkey-photo">
  <img class="main" src="img/monkey-main.jpg" alt="">
</div>

<div class="first-level">
  <p>Monkey Apes</p>
  <img src="img/one.jpg" alt="" id="one">
  <img src="img/two.jpg" alt="" id="two">
  <img src="img/three.jpg" alt="" id="three">
  <img src="img/four.jpg" alt="" id="four">
  <img src="img/five.jpg" alt="" id="five">
</div>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 2

Первое, что приходит на ум - это подмена адреса изображения.

^{(Просто поразительно, как схож JS-код, который был сохранён гораздо ранее на Codepen в процессе написания ответа, с кодом в предыдущем ответе. Возможно, что это просто совпадение в виду очевидности и оптимальности решения ;-)}

let largeImage = document.querySelector('.main');
document.querySelector('.first-level').addEventListener('click', (ev) => {
  let target = ev.target;
  if (target.tagName != 'IMG') return;
  let temper = target.src;
  target.src = largeImage.src;
  largeImage.src = temper;
})

.wrapper{margin:0 auto;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;gap:10px;width:min-content;padding:10px 64px;border-radius:10px;background-color:#30384d}.monkey-photo img{height:256px;width:256px;object-fit:cover}.first-level{display:flex;flex-flow:row nowrap;width:100%}.first-level p{margin:0;color:#fff;flex:1}.first-level img{margin:0 -15px 0 0;height:48px;width:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 3px 1px #30384d}

<div class="wrapper">
  <div class="monkey-photo">
    <img class="main" src="https://i.sstatic.net/m9kuJ.jpg">
  </div>
  <div class="first-level">
    <p>Monkey Apes</p>
    <img src="https://i.sstatic.net/MraLT.jpg">
    <img src="https://i.sstatic.net/VxVNC.jpg">
    <img src="https://i.sstatic.net/A9VLC.jpg">
    <img src="https://i.sstatic.net/oYG0R.jpg">
  </div>
</div>

Если же присмотреться к исходной разметке, то можно заметить, что у изображений присутствуют также дополнительные атрибуты, такие как alt и id. Переносить каждый из атрибутов по отдельности иррационально, поэтому предлагаю перемещать непосредственно сами элементы <img>:

document.querySelector('.first-level').addEventListener('click', (ev) => {
  let target = ev.target;
  if (target.tagName != 'IMG') return;
  let largeImage = document.querySelector('.monkey-photo img');
  let parent = largeImage.parentElement;
  target.before(largeImage);
  parent.append(target);
});

.wrapper{margin:0 auto;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;gap:10px;width:min-content;padding:10px 64px;border-radius:10px;background-color:#30384d}.monkey-photo img{height:256px;width:256px;object-fit:cover}.first-level{display:flex;flex-flow:row nowrap;width:100%}.first-level p{margin:0;color:#fff;flex:1}.first-level img{margin:0 -15px 0 0;height:48px;width:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 3px 1px #30384d}

<div class="wrapper">
  <div class="monkey-photo">
    <img src="https://i.sstatic.net/m9kuJ.jpg" alt="" id="zero">
  </div>
  <div class="first-level">
    <p>Monkey Apes</p>
    <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall" id="one">
    <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower" id="two">
    <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest" id="three">
    <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose" id="four">
  </div>
</div>

Answer 2

▲ 1

когда нажму на любую картинку внизу (круглую) то она станет на место большой, а большая пойдет на на место той картинку на которую я нажал в низу

Как вариант...

document.querySelector('.first-level').addEventListener('click', e => {
  const o = e.target
  if (o.tagName != 'IMG') return
  const ob = document.querySelector('.monkey-photo .main')
  const val = o.src
  o.src = ob.src
  ob.src = val
})

.first-level {
  display: flex;
}
.first-level img {
  width: 50px;
  height: 50px;
}

<div class="monkey-photo">
  <img class="main" src="https://avatars.mds.yandex.net/i?id=c091ce6918e2ae3de34494d8bbb998d7e43fe3f0-5216463-images-thumbs&n=13" alt="">
</div>

<div class="first-level">
  <p>Monkey Apes</p>
  <img src="https://avatars.mds.yandex.net/i?id=e40e5aaa92fd4de964daa53a016ebeb20190a527-6379389-images-thumbs&n=13" alt="" id="one">
  <img src="https://avatars.mds.yandex.net/i?id=b097a424f14742e20c7b3012a25dfdadd0cb002a-7992926-images-thumbs&n=13" alt="" id="two">
  <img src="https://avatars.mds.yandex.net/i?id=090dc77181d7bdde5fbafee651d68907ec607c41-8174067-images-thumbs&n=13" alt="" id="three">
</div>

Как сделать так, чтобы при нажатии на картинку она менялась местами с другой картинкой

Ответы