javascript - jQuery undo具有多个remove();

如何获得始终记住上一个removed .items的顺序的函数，以便我可以undo尽可能多地在undo timeout发生之前删除的项目？

我希望能够快速remove全部.items然后按undo替换所有三个，其中一个按一个，其中按undo按钮替换上一个删除的项目。

目前，我只能替换最后删除的.item。

var undo = false;
var remove;
var timeout;
$(document).ready(function() {
  /*DELETE*/
  $('body').on('click', '.fa-times', function() {
    if ($('.item').hasClass("temp_deleted")) {
      $('.item.temp_deleted').remove();
    }
    remove = $(this).parent().parent();
    var undo_time = 10000;
    remove.animate({
      height: "0px"
    }, 200, function() {
      $(this).addClass('temp_deleted').hide();
    });
    function_undo(remove, undo);
    //undo
    $('.undo').addClass('active');
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      $('.undo').removeClass('active');
      if (undo === false) {
        $('.item.temp_deleted').remove();
      }
    }, undo_time);

  });
  /*UNDO*/
  $('.undo div').click(function() {
    undo = true;
    function_undo(remove, undo);
    $(this).parent().removeClass('active');
  });
});

function function_undo(remove, undo) {
  if (undo == true) {
    remove.css('height', 'auto');
    remove.show();
    remove.removeClass('temp_deleted');
  }
}

.item {
  width: 100px;
  height: 50px;
  border: 2px solid
}

.actions span.fa-times:hover {
  color: #fe4444;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    <div class="actions">
      <span class="fa fa-times"></span>
    </div>
  </div>
  <div class="item">
    <div class="actions">
      <span class="fa fa-times"></span>
    </div>
  </div>
  <div class="item">
    <div class="actions">
      <span class="fa fa-times"></span>
    </div>
  </div>
</div>
</div>
<div class="undo">
  <div>
    <span class="fa fa-undo"></span> Undo
  </div>
</div>

最佳答案

正如我所说，您可以将它们保存在一个数组中。删除它时，在数组中push。如果要撤消某些操作，请pop撤消。

顺便说一句，就像@LexJacobs所说的，不要remove它。只是hide它。

不确定这是否是您想要的。但我正在尝试将其结构化。

var undo = false;
var timeout;
var arr = [];
$(document).ready(function() {
  /*DELETE*/
  $('body').on('click', '.fa-times', function() {
    if ($('.item').hasClass("temp_deleted")) {
      $('.item.temp_deleted').hide();
    }
    remove = $(this).parent().parent();
    var undo_time = 10000;
    remove.animate({
      height: "0px"
    }, 200, function() {
      $(this).addClass('temp_deleted').hide();
    });
    function_undo(remove, undo);
    //undo
    $('.undo').addClass('active');
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      $('.undo').removeClass('active');
      if (undo === false) {
        $('.item.temp_deleted').hide();
      }
    }, undo_time);
    arr.push(remove);

  });
  /*UNDO*/
  $('.undo div').click(function() {
    undo = true;
    var remove = arr.pop();
    function_undo(remove, undo);
    $(this).parent().removeClass('active');
  });
});

function function_undo(remove, undo) {
  if (undo == true) {
    remove.css('height', 'auto');
    remove.show();
    remove.removeClass('temp_deleted');
  }
}

.item {
  width: 100px;
  height: 50px;
  border: 2px solid
}

.actions span.fa-times:hover {
  color: #fe4444;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    <div class="actions">
      <span class="fa fa-times"></span> 1
    </div>
  </div>
  <div class="item">
    <div class="actions">
      <span class="fa fa-times"></span> 2
    </div>
  </div>
  <div class="item">
    <div class="actions">
      <span class="fa fa-times"></span> 3
    </div>
  </div>
</div>
</div>
<div class="undo">
  <div>
    <span class="fa fa-undo"></span> Undo
  </div>
</div>

关于javascript - jQuery undo具有多个remove();，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51739392/