2016-12-17 24 views
2

私は、ユーザーのカードリストを持って、私のタスクは次のとおりです。私は、カードのリストから配列を作成する方法:(使用配列を)削除された最後のカードを復元します削除したアイテムをアレイから復元するには?

質問1:ボタンを「元に戻す」を

クリック表示されていますか? 質問2:削除された最後のカードを復元するにはどうすればよいですか?ときに、画面負荷

、一度にすべてのカードをロード - //ここで 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>'; 

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

答えて

5

あなたは、任意の実際のデータのみ操作していないので、自分自身を表示する - 削除カードにクラス.hiddenを追加し、取り消し時にこのクラスを削除することができます。

削除されたユーザーを追跡するために、配列var deletedUsers =[]を追加しました。ユーザーを削除するたびに、そのIDを配列に追加し、クラスhiddenを追加して表示から非表示にします。アンドゥオン

からdeletedUsersからユーザIDをポップし、このユーザのカードからクラスhiddenを削除

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

+2

おかげで、私は3を削除した場合、私はあなたのケースでは、1で取り外したカード1を復元する必要があります3つすべてが戻ってきます。 –

+0

たとえば、2人のユーザーを削除した場合、[元に戻す]を2回クリックすると、1人ずつ1人ずつ復元されますか?または、最後に削除されたユーザーのみを復元できますか? – Slonski

+0

削除されたアイテムを追跡します。 – epascarello

関連する問題