javascript - 将 Div 类附加到超链接类——然后在单击时克隆超链接并将其附加到容器

Question

1. 当您将鼠标悬停在任何超链接(具有“.link”类)上时，我想将 div 类(“.link-cloner”)附加到超链接类(“.link”) ).
2. 然后，当您单击附加的 (.link-cloner) 类时，我想克隆它附加到的超链接，并将该(链接)附加到#container。

我快到了，我只是无法完成最后一部分。

代码笔: http://codepen.io/StrengthandFreedom/pen/JXEEQP/

jQuery:

$(document).ready(function(e) {
  /* ------------------------
    Part 1 — WORKS
  --------------------------*/
  // Store link-cloner div in variable
  var linkCloner = $('<div class="link-cloner">Cloner</div>');

  // When mouse hover over any hyperlink
  $('.link').on('mouseover', function() {

    // Append the link-cloner class to the hyperlink
    $(this).append(linkCloner);
  }).mouseleave(function() {

    //on mouse leave, remove link-cloner 
    $(linkCloner).remove();
  });
/* ------------------------
    Part 2 — DOESN'T WORK
  --------------------------*/
  //Then when you click on the appended linkCloner, 
  clone the hyperlink and append it to the #container
  $(linkCloner).on('click', function() {

  // This code is wrong.... 
  event.preventDefault();
  $('.link').clone().append('<li></li>').appendTo('#container');

  });
});

有人可以引导我朝着正确的方向前进吗？ JavaScript 或 jQuery，我都可以(我正在学习两者):-)

Answer 1

你只是犯了一个小错误。用以下代码替换您的第 2 部分:

$('.link').on('click', function(event) {

  // This code is wrong.... 
  event.preventDefault();
  $(this).clone().append('<li></li>').appendTo('#container');

});