2
我有一个用户卡列表,我的任务是:如何恢复从数组中删除的项目?
点击“取消”按钮:将恢复被删除的最后一张牌(利用数组)
问题1:如何使从卡列表我阵列已经显示? 问题2:如何恢复最后一张被删除的卡? (IF 2卡被删除,“撤消”按钮,将还原卡逐个)
链接到这里codepen https://codepen.io/MarinaShumeiko/pen/Nbeqew?editors=1010
var root = 'https://jsonplaceholder.typicode.com';
var notificationMessage = "Oops, there are no more user cards to display";
var userIndex = 0;
var undoBtn = $("#button")
var $clearBtn = $("#clear");
var $contentArea = $("#content");
var cardTemplate = '<div class="card" data-id="{id}"><div class="title"><div class="image"></div><div class="name">{name}</div><button onclick="removeUser({postid})" class="close"></button></div><div class="description">{body}<a href="mailto:" class="email">{email}</a></div></div>';
// - 一次加载所有的卡,当屏幕载入
$(function() {
$contentArea.append(renderUser);
});
//使从usercards阵列
var $cardDiv = $(".card");
var usersCardArray = $cardDiv.toArray(); // return usersCardArray.length = 0 :(
//删除所有卡一次
$clearBtn.click(clearUsers);
function clearUsers() {
$contentArea.empty();
userIndex = 0;
}
//删除一个卡
$('.card .close').on('click', removeUser);
function removeUser(postId) {
$('[data-id="' + postId + '"]').remove();
}
//获取用户数据
function getUser() {
return $.ajax({ url: root + '/posts/1/comments', method: 'GET' });
}
function renderUser() {
getUser().then(function (user) {
for (var i = 0; i = user.length; i++) {
var card = cardTemplate
.replace('{id}', user[userIndex].id)
.replace('{postid}', user[userIndex].id)
.replace('{name}', user[userIndex].name)
.replace('{body}', user[userIndex].body)
.replace('{email}', user[userIndex].email);
$contentArea.append(card);
userIndex++;
}
})
}
谢谢,但我需要一个恢复被删除的卡之一,你的情况,如果我删除3物品,所有三个都回来了。 –
例如,如果我删除了2个用户,例如点击撤消两次应该一个接一个还原两个用户?或者只有上次删除的用户才能恢复? – Slonski
因此,跟踪移除的项目。 – epascarello