jQuery undo with multiple remove()；
jQuery undo with multiple remove()；
提问于 2018-08-08 13:47:58
如何让函数始终记住最后一次removed .items的顺序，这样我就可以undo在undo timeout发生之前被移除的所有项？
我希望能够快速地撤消所有.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>
回答 1
Stack Overflow用户
发布于 2018-08-08 15:11:26
正如我所说的，您可以将它们保存在数组中。当您删除它时，在数组中对其执行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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51739392
复制相关文章
相似问题
腾讯云开发者
