javascript - Jquery - 使用空（）选择器后如何恢复默认值

Question

我有桌子，它有 2 个标签。当我单击隐藏按钮时，将使用 $().empty() 消失。但我不知道如何恢复。
我不想使用 $().append 或类似添加新数据的东西。我想恢复它。
我怎样才能做到这一点。谢谢

<script type="text/javascript">

$(function(){
    $('#hidden').click(function(){
        $('.hidden').empty();
    });
    $('#restore').click(function(){
        // restore defaults
    });
});
</script>
<table>
    <tr class="hidden">
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>d</td>
    </tr>
</table>
<input type = "button" id ='hidden' value="hidden"/>
<input type = "button" id ='restore' value="restore"/>

Answer 1

您可以简单地隐藏和显示项目，而不是清空。

$('#hidden').click(function(){
    $('.hidden').hide();
});
$('#restore').click(function(){
    $('.hidden').show();
});

Answer 2

为什么不直接使用hideand show：

$(function(){
    $('#hidden').click(function(){
        $('.hidden').hide();
    });
    $('#restore').click(function(){
        // restore defaults
        $('.hidden').show();
    });
});

Answer 3

如果您不想简单地隐藏它（如前所述），您可以将其保存在对象中。

$(function(){
    var data;
    $('#hidden').click(function(){
        data = $('.hidden').html();
        $('.hidden').empty();
    });
    $('#restore').click(function(){
        $('.hidden').html(data);
    });
});

Answer 4

empty() 将从 dom 中删除内容，因此它会永远丢失如果您只想隐藏内容，则应使用

$.hide() 

进而

$.show()

Answer 5

调用 .empty() 后无法恢复内容。还有另一个函数： .detach() 将选定元素从 DOM 中分离出来，但不会完全擦除它们。分离后，可以使用 .append() 或 .prepend() 再次附加元素。