如何从数组中恢复移除项?

I have a users card list, my task is:

我有一个用户卡列表，我的任务是:

Clicking "undo" button: will restore the last card that was deleted (use array)

单击“撤消”按钮:将恢复已删除的最后一张卡片(使用数组)

Question 1: How to make array from cards list I have displayed ? Question 2: How to restore the last card that was deleted? (IF 2 cards are removed, "undo" button will to restore card one by one)

问题1:如何从我所显示的卡片列表中创建数组?问题2:如何恢复被删除的最后一张卡?(如果删除2张卡，“撤消”按钮将逐个恢复卡)

Link to codepen here https://codepen.io/MarinaShumeiko/pen/Nbeqew?editors=1010

这里链接到代码页https://codepen.io/marinashumeiko/pen/nbeqew?

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>';

// - Load all the card at once, when screen load

// -当屏幕加载时，一次加载所有的卡

 $(function() {
      $contentArea.append(renderUser);
    });

// Make array from usercards

//从用户卡中创建数组

 var $cardDiv = $(".card");
 var usersCardArray = $cardDiv.toArray(); // return usersCardArray.length = 0 :(

//remove all card at once

//立即删除所有卡。

$clearBtn.click(clearUsers);

function clearUsers () {
  $contentArea.empty();
  userIndex = 0;
}

//remove one card

/ /删除一个卡

$('.card .close').on('click', removeUser);

function removeUser(postId) {
  $('[data-id="'  + postId + '"]').remove();
}

// get user data

/ /获取用户数据

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++;
        }
      })
    }

1 个解决方案

#1

Since you don't manipulate any actual data, only the view itself - you can add class .hidden on delete card, and remove this class on undo.

因为您没有操作任何实际的数据，只有视图本身——您可以添加类。隐藏在删除卡上，并在撤销上删除这个类。

To keep track on deleted users I added array var deletedUsers =[]. Each time you delete a user, add its id to array and hide it from view by adding class hidden.

为了跟踪已删除的用户，我添加了数组var deletedUsers =[]。每次删除一个用户时，将其id添加到数组中，并通过添加类hidden将其隐藏到视图中。

On undo - pop the user id from deletedUsers, and remove class hidden from this user's card

在撤消-从删除用户中取出用户id，并从该用户的卡中移除隐藏的类

https://codepen.io/anon/pen/PbXxrB

#1