时间戳

首页 > 解决方案 > jQuery 撤消多个 remove();

javascript - jQuery 撤消多个 remove();

问题描述

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

我希望能够快速remove全部.items然后按下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>

标签： javascriptjquery

解决方案

正如我所说，您可以将它们保存在数组中。当你删除它时，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>

推荐阅读