私は、ユーザーのカードリストを持って、私のタスクは次のとおりです。私は、カードのリストから配列を作成する方法:(使用配列を)削除された最後のカードを復元します削除したアイテムをアレイから復元するには?
質問1:ボタンを「元に戻す」を
クリック表示されていますか? 質問2:削除された最後のカードを復元するにはどうすればよいですか?ときに、画面負荷
、一度にすべてのカードをロード - //ここで https://codepen.io/MarinaShumeiko/pen/Nbeqew?editors=1010var 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>';
をcodepenする (2枚のカードが取り外されている場合、いずれかによってカード1を復元するには、ボタンの意志を「元に戻す」)
リンク
$(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を削除した場合、私はあなたのケースでは、1で取り外したカード1を復元する必要があります3つすべてが戻ってきます。 –
たとえば、2人のユーザーを削除した場合、[元に戻す]を2回クリックすると、1人ずつ1人ずつ復元されますか?または、最後に削除されたユーザーのみを復元できますか? – Slonski
削除されたアイテムを追跡します。 – epascarello