Question

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

点击＆＃34;撤消＆＃34;按钮：将恢复已删除的最后一张卡（使用数组）

问题1：如何从我显示的卡片列表中制作阵列？问题2：如何恢复删除的最后一张卡？（IF 2卡被移除，＆＃34;撤消＆＃34;按钮将逐个恢复卡）

此处链接到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);
    });

//从用户卡创建数组

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

Answer 1

由于您不操纵任何实际数据，只有视图本身 - 您可以在删除卡上添加类.hidden，并在撤消时删除此类。

为了跟踪已删除的用户，我添加了数组var deletedUsers =[]。每次删除用户时，都要将其ID添加到数组中，并通过添加类hidden将其隐藏起来。

在撤消时 - 从deletedUsers弹出用户ID，并从此用户的卡中删除课程hidden

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

如何从数组中恢复已删除的项目？

1 个答案: