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();
});

如果您要创建＆＃39;撤消＆＃39;功能你还必须记住物品的位置（在它被移除之前）把它放回正确的位置。

删除和恢复div切换

2 个答案: