克隆、追加和删除

Question

我有几个这样的项目

<div class="item">
  <figure>
    <span class="overlay"></span>
    <img...>
    <figcaption>
      <h3>Title</h3>
    </figcaption>
  </figure>
</div>

我正在尝试克隆figcaption h3，以便在单击该项目时将figcaption h3 附加到overlay 并且当单击另一个项目时，删除前一个项目的标题并克隆下一个单击的标题并附加...当然我可以避免使用 jQuery，但解决问题有学术原因！

我的粗略尝试如下

$(".item").on("click", function() { 
  $(".overlay h3").remove();    
  var $title = $('.overlay');
      $('figcaption h3').each(function(i) {
      $(this).clone().appendTo($title.eq(i));
  });   
});

问题是，当单击任何项​​目时，每个h3 标题都会附加到其overlay。附加的克隆也没有完全删除。每次都重新克隆标题，并且始终克隆一个。克隆标题是最好的方法还是使用html()？

Answer 1

您可以执行以下操作：

$(".item").on("click", function() { 
  $(".overlay h3").remove();    

  $h3 = $(this).find('h3').clone();

  $(this).find('.overlay').html($h3);
});

这只会抓取被点击元素的 H3 并将其附加到 span。