撤消(ctrl + z)功能以恢复隐藏的div

Question

fiddle http://jsfiddle.net/Q8F5u/3/

我有多个div,每个顶部都有一个删除按钮来删除特定的div(实际上我必须隐藏不删除).的div之后已经删除了我想要检索他们回来按CTRL + Z.

我把它们带回来取得了一些成功.我使用的逻辑是我将删除的divs id 推入堆栈,每当我按下ctrl + z时,我从堆栈中弹出最后一个隐藏的div ID并使用此id来恢复隐藏的div.

这里的javascript:

var deletedBlocks = [];

$('.delete').on('click',function(){
   var deletedid = $(this).closest('div[id^=block]').attr('id');
    deletedBlocks.push(deletedid);
   $(this).closest('div[id^=block]').fadeOut(500); 


});

$('body').on('keydown',function(e){
    //check for ctrl + z key

    if( e.ctrlKey && e.which == 90){

        if(deletedBlocks.length > 0){

           var lastdeleted = deletedBlocks.pop();
            $('.container').children('#'+  lastdeleted).fadeIn(1000);
    }
        else{
            alert('NO further Shift to be retrieved');
        }
    }

});

我遇到的问题是,在我的实际应用程序中,这些div没有这样的唯一ID.相反,他们都有相同的类.如何在没有div具有唯一ID的情况下实现相同的功能.

Answer 1

如果你只是隐藏div,你实际上可以将div本身推送到堆栈而不是ID.

$('.delete').on('click',function(){
    var deleted = $(this).closest('div[id^=block]');
    deletedBlocks.push(deleted);
    deleted.fadeOut(500); 
});

$('body').on('keydown',function(e){
    //check for ctrl + z key

    if( e.ctrlKey && e.which == 90){

        if(deletedBlocks.length > 0){

           var lastdeleted = deletedBlocks.pop();
           lastdeleted.fadeIn(1000);
        }else{

            alert('NO further Shift to be retrieved');
        }
    }

});

注意,我刚刚重构了你的代码.没试过.但是你明白这个想法应该有用.