在JQuery中克隆/取消克隆

Question

我正试图“克隆”一张图片(在同一页上显示两次)，并在点击按钮时再次隐藏它。

有没有办法使用下面的函数让它工作？

​

$(".clone-button").on("click", function() {})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cloneControls" class="card">
    <h4 class="card-header">Double Power!</h4>
    <div class="card-body">
        <div class="text-center">
            <button class="btn btn-dark btn-lg clone-button">
                <span class="fa fa-ok"></span>
                Clone
            </button>
            <button class="btn btn-primary btn-lg unclone-button">
                <span class="fa fa-plus"></span>
                Unclone
            </button>
        </div>
    </div>
</div>

​

我刚刚开始学习Javascript和JQuery。我已经做了一些研究，尝试切换，引导克隆，甚至创建了getElementID，然而，我的方法似乎都不起作用。显然我理解错了，有没有人能先给我一些建议？

Answer 1

使用JQuery的clone方法非常容易。请注意，它会生成重复的ID。你必须自己移除它们。clone不会在DOM中进行复制。您必须随后插入新节点。

由于几乎每个JQuery方法都返回JQuery集合，因此您可以在不使用变量的情况下链接方法调用。

​

$(".clone-button").on("click", function() 
{
  $('#to-clone')
    .clone()
    .addClass('cloned')
    .attr('id',null)           // we do not want duplicate IDs
    .insertAfter('#to-clone');
});

$(".unclone-button").on("click", function() 
{
  $('.cloned').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cloneControls" class="card">
    <h4 class="card-header">Double Power!</h4>
    <img id="to-clone" src="https://via.placeholder.com/350x65">
    <div class="card-body">
        <div class="text-center">
            <button class="btn btn-dark btn-lg clone-button">
                <span class="fa fa-ok"></span>
                Clone
            </button>
            <button class="btn btn-primary btn-lg unclone-button">
                <span class="fa fa-plus"></span>
                Unclone
            </button>
        </div>
    </div>
</div>

​