显示隐藏的元素

Question

我有三个div元素。当你点击它们时，它们将被隐藏。还有一个按钮，它应该显示隐藏的元素。

这是我的代码：

$("div").click(function(e) {
  $(this).hide();
});

$("body").on('click', '.close_cmnt_edit', function(e) { 
   /* how to show that element which is hide? */
});

div{
border:1px solid gray;
padding 15px;
margin: 5px;
text-align: center;
cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="test1">anything1</div>
<div class="test2">anything2</div>
<div class="test3">anything3</div>

<br><br>
<button>show that element which is hide </button>

注意：如果有多个隐藏元素，则必须根据hide-order显示它们。例如：首先隐藏div.test2，然后隐藏div.test1。因此，当我点击该按钮时，必须先显示div.test2，然后div.test1。

Answer 1

如果只隐藏了一个元素，或者显示所有隐藏元素，则可以执行以下操作：

$("body").on('click', '.close_cmnt_edit', function(e) { 
   $("div:hidden").show();
});

为了显示元素的顺序，您可以将数组数据用作堆栈。

// Create a track of all the elements.
hiddenElements = [];

$("div").click(function(e) {
  hiddenElements = hiddenElements.reverse();
  hiddenElements.push($(this).attr("class"));
  hiddenElements = hiddenElements.reverse();
  $(this).hide();
});

$("body").on('click', 'button', function(e) { 
   $("." + hiddenElements.pop()).show();
});

div{
border:1px solid gray;
padding 15px;
margin: 5px;
text-align: center;
cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="test1">anything1</div>
<div class="test2">anything2</div>
<div class="test3">anything3</div>

<br><br>
<button>show that element which is hide </button>

使用hiddenElements = hiddenElements.reverse();反转数组。

Answer 2

正如@adeneo在评论中提到的，这没关系：

常规订单：

var arr = [];

$("div").click(function(e) {
  arr.push($(this).hide());
});

$(document).on('click', '.close_cmnt_edit', function(e) { 
   arr.pop().show();
});

div{
border:1px solid gray;
padding 15px;
margin: 5px;
text-align: center;
cursor:pointer;} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="test1">anything1</div>
<div class="test2">anything2</div>
<div class="test3">anything3</div>
<br><br>
<button class="close_cmnt_edit">show that element which is hide </button>

逆序：（问题中我想要的）

var arr = [];

$("div").click(function(e) {
  arr.push($(this).hide());
});

$(document).on('click', '.close_cmnt_edit', function(e) { 
   arr.shift().show();
});

div{
border:1px solid gray;
padding 15px;
margin: 5px;
text-align: center;
cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="test1">anything1</div>
<div class="test2">anything2</div>
<div class="test3">anything3</div>
<br><br>
<button class="close_cmnt_edit">show that element which is hide </button>