2016-12-17 41 views
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++; 
     } 
     }) 
    } 

回答

5

既然你不處理任何實際的數據,僅查看本身 - 您可以在刪除卡上添加.hidden類,並在撤消時刪除此類。我想添加數組var deletedUsers =[]。每次刪除用戶時,都將其ID添加到數組中,並通過添加類hidden將其隱藏。

在撤銷 - 從deletedUsers彈出的用戶ID,並從該用戶的卡取出hidden

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

+2

謝謝,但我需要一個恢復被刪除的卡之一,你的情況,如果我刪除3物品,所有三個都回來了。 –

+0

例如,如果我刪除了2個用戶,例如點擊撤消兩次應該一個接一個還原兩個用戶?或者只有上次刪除的用戶才能恢復? – Slonski

+0

因此,跟蹤移除的項目。 – epascarello