Question

我有多个div，下面有按钮

所以我想做的是当我选择一个特定的并点击复制div时，我只想复制该div并立即粘贴它。删除也一样。

我将如何实现这一目标？我是jquery的新手。

这是我尝试过的：

    $('#areas').on('click', '.item', function() {
        var thisitem = $(this).clone();
        var thisitemDelete = $(this);
        $(this).css("background-color","gray");
        $( "#copy").click(function(e) {
            thisitem.appendTo("#areas");
        });
        $( "#delete").click(function(e) {
            thisitemDelete.remove();
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="areas">
    <div class="item" style="width: 100px; height: 100px; border:1px solid; border-color: blue;">1</div>
    <br>
    <div class="item" style="width: 100px; height: 100px; border:1px solid; border-color: red;">2</div>
    <br>
    <div class="item" style="width: 100px; height: 100px; border:1px solid; border-color: black;">3</div>
    <br>
    <div class="item" style="width: 100px; height: 100px; border:1px solid; border-color: green;">4</div>
</div>
<br>

    <button id="copy">Copy</button>
<br><br>
    <button id="delete">delete</button>

但问题是一旦选择了某些内容，我将无法取消选择，并且您可以尝试在jsfiddle上尝试更多错误 https://jsfiddle.net/kunz/3tr7x14u/1/

Answer 1

尝试一下：

 $('#areas').on('click', '.item', function() {
    var $this = $(this);
    var thisitem = $(this).clone();
    var thisitemDelete = $(this);
    $( "#copy, #delete").unbind('click');
    $( "#copy").click(function(e) {
        thisitem.appendTo("#areas");
        $($this).css("background-color","");
    });
    $( "#delete").click(function(e) {
        thisitemDelete.remove();
        $($this).css("background-color","");
    });
    $(this).css("background-color","gray");
});

Answer 2

您可以使用CSS类来识别单击的项目。单击某个项目后，您将从所有其他项目中清除该类，然后将其切换为单击的项目。然后，您可以使用它来标识要删除和复制的所选项目。

例如

$("#areas .item").click(function() {
 
  // deselect all other items
  $("#areas .item").not(this).removeClass("selected-item");

  // select/deselect clicked item
  $(this).toggleClass("selected-item");

});

$("#copy").click(function(e) {

  // copy selected item
  $("#areas .selected-item").clone().appendTo("#areas");

});

$("#delete").click(function(e) {

  // remove selected item
  $("#areas .selected-item").remove();

});

.selected-item {
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="areas">
  <div class="item" style="width: 100px; height: 100px; border:1px solid; border-color: blue;">1</div>
  <br>
  <div class="item" style="width: 100px; height: 100px; border:1px solid; border-color: red;">2</div>
  <br>
  <div class="item" style="width: 100px; height: 100px; border:1px solid; border-color: black;">3</div>
  <br>
  <div class="item" style="width: 100px; height: 100px; border:1px solid; border-color: green;">4</div>
</div>
<br>

<button id="copy">Copy</button>
<br><br>
<button id="delete">delete</button>

复制选定的div并粘贴以及删除

2 个答案: