顯示隱藏的元素

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> 

注意：如果有多個隱藏元素，則必須根據隱藏順序顯示它們。 例如：首先， div.test2被div.test1 ，然后div.test1被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();反轉數組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>