刪除和恢復div切換

Question

我想創建一個切換之間的div被刪除，並根據事件觸發器恢復。我正在使用jQuery。我如何使用.click事件做到這一點？

Answer 1

它的簡單讓我們說你會有2個div。

使用這種在JS

$(document).ready(function() { 

      $("#div1").hide(); 
      $("#div2").hide(); 


        $('#button1').click(function() { 
         $("#div1").show(); 
         $("#div2").hide(); 

        }); 

        $('#button2').click(function() { 
         $("#div1").hide(); 
         $("#div2").show(); 

        }); 


       }); 

和HTML

<button id="button1" >Show Div1 </button> 
<button id="button2" >Show Div2 </button> 

<br><br> 

    <div id="div1" ><h1> Hello </h1></div> 
    <div id="div2" > <h1> Bye </h1></div> 

在這裏看到一個活生生的例子：http://jsfiddle.net/ptqdrr8t/1/

Answer 2

你可以找到一個div並使用它與jQuery移動它，也改變樣式/內容/類名等，但它並不總是最好的表現，你也可以考慮顯示/隱藏div，而不是像前面提到的那樣。

這裏有一個例子： http://jsfiddle.net/web_nfo/57x4agL7/

HTML：

<div id="removedItems"></div> 
<div class="item"> 
    <h3>Item1</h3> 
    <span class="remove">Remove</span> 
</div> 

的jQuery：

$(document).ready(function(){ 
    $('.item span.remove').click(function(){ 
     // Find the item 
     var $item = $(this).parent(); 

     // You can change the original item 
     $item 
     .addClass('removed') 
     .find('h3').append('<span>[removed]</span>'); 

     // Move the item 
     $('#removedItems').append($item); 
    }); 
}); 

或者，如果你正在尋找另一種方式（真正 '刪除' 的項目第一）您可以將整個$ item對象存儲在一個數組中，稍後使用它重新創建一些內容。也許這樣？

var history = []; 
$('.item span.remove').click(function{ 
    var $item = $(this); 

    history.push($item); 
    $item.remove(); 
}); 

如果要創建「撤消」功能也必須記住該項目的位置（除去之前），把它回到正確的位置。