jquery - Jquery appendTo，删除多个div

Question

我是 jquery 的新手，对此完全迷失了。我已经搜索了很多没有成功。这是我正在尝试做的事情：

因此，我将一个区域中的（隐藏）div 附加到 DOM 中多个级别的另一个 div：

$(".show_hide").on("click", function(event){

    $(this).next(".event-details").appendTo("#sc_events").addClass("current-event");

    return false;

});

我的问题是容器中还有几个 div 在做同样的事情。所以，我需要能够删除这个附加的 div，当单击下一个时，新的 div 会弹出。我让它像这样工作：

$(".show_hide").on("click", function(event){
$(".current-event").remove();
    $(this).next(".event-details").appendTo("#sc_events").addClass("current-event");

    return false;

});

但是，如果我单击带有 show_hide 类的先前单击的项目，它不会返回，因为它已使用此方法删除。我只需要它再次可用。

我希望这是有道理的。并感谢您的帮助。这是一个http://jsfiddle.net/CGySr/，我无法开始工作，但或多或​​少有 html 结构。

Answer 1

您可以使用 jQueryclone()在添加隐藏 div 之前对其进行复制。我还建议preventDefault()在单击链接时防止潜在的页面跳转或页面刷新。

$(".show_hide").on("click", function(event){
  event.preventDefault();
  $(".current-event").hide();
  $(this).next(".event-details").clone().appendTo("#sc_events").addClass("current-event").show();
  return false;
});

见演示。