Question

小提琴 http://jsfiddle.net/Q8F5u/3/

我有多个div ，每个都有一个删除按钮在其顶部删除该特定div（实际上我必须隐藏不删除）。 div 已删除后，我想通过按CTRL + Z将其恢复为。

我在取回它方面取得了一些成功。我使用的逻辑是我将已删除的div id＆＃39; s推送到堆栈，每当我按下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');
        }
    }

});

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

Answer 2

您可以使用jQuery的.eq()和.index()方法。

在你的行中：

var deletedid = $(this).closest('div[id^=block]').attr('id');

您可以检索已删除元素的索引：

var deletedIndex = $(this).closest('div[id^=block]').index();

将此索引存储在数组中，稍后使用.eq（）取消删除正确的元素：

 $('.container').closest('div[id^=block]').eq(lastdeleted).fadeIn(1000);

撤消（ctrl + z）功能以恢复隐藏的div

2 个答案: