Как переместить нужный элемент при клике?

Question

[KarlosSatana]

Создал 3 img превьюшки с элементами figcaption, при клике на любую, она отображаются на большой. Картинки нормально дублируются, а с переносом элемента figcaption возникла проблема. При клике копируется первый кликнутый и там остается.

CodePen

<div class="thumbnails">
  <figure>
    <img class="small-img" src="https://picsum.photos/200/200/?image=12"/>
    <figcaption class="small-fig">Описание 1</figcaption>
  </figure>
  <figure>
    <img class="small-img" src="https://picsum.photos/200/200/?image=22"/>
    <figcaption class="small-fig">Описание 2</figcaption>
  </figure>
  <figure>
    <img class="small-img" src="https://picsum.photos/200/200/?image=33"/>
    <figcaption class="small-fig">Описание 3</figcaption>
  </figure>
</div>
<div class="bigpicture">
  <figure class="main">
    <img class="big-img" src="https://picsum.photos/200/200/?image=12"/>
    <figcaption class="big-fig">Описание 1</figcaption>
  </figure>
</div>

$(document).ready(function() {
  $('.small-img').click(function(){
    var srcimg  = $(this).attr('src');
    var content = $(this).siblings('.small-fig').html();   
    $('.big-img').attr('src', srcimg);
    $('.big-fig').replaceWith(content);
  });
});

Answer 1

[0xD34F]

Замените replaceWith на html: $('.big-fig').html(content);.

Или, к чёрту jquery:

const image = document.querySelector('.big-img');
const text = document.querySelector('.big-fig');

document.querySelectorAll('.small-img').forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick() {
  image.src = this.src;
  text.innerHTML = this.closest('figure').querySelector('.small-fig').innerHTML;
}

Comments

[KarlosSatana]

Спасибо!