[英]jQuery undo with multiple remove();
How do I get the function to always remember the sequence of the last removed
.items
so that I may undo
as many items that were removed before the undo timeout
occurs? 我如何获得该功能以始终记住上次removed
.items
的顺序,以便我可以undo
在undo timeout
发生之前删除的所有项目?
I want to be able to quickly remove
all .items
and then press undo
to replace all three, one by one where pressing the undo button replaces the last removed item. 我希望能够快速remove
所有.items
,然后按undo
来全部替换所有三个.items
,其中一个按undo按钮替换上一个删除的项目。
Currently I can only replace the last removed .item
. 目前,我只能替换最后一个删除的.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>
As I said, you can save them in an array. 正如我所说,您可以将它们保存在一个数组中。 When you remove it, push
it in the array. 删除时, push
其push
阵列。 When you want to undo something, pop
it out. 当您要撤消某些操作时,将其pop
。
And by the way, as @LexJacobs said, don't remove
it. 顺便说一句,就像@LexJacobs所说的,不要remove
它。 just hide
it. hide
Not sure if this is what you want. 不确定这是否是您想要的。 But I'm trying to structure this out. 但我正在尝试将其结构化。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.