我怎样才能交换那 2 个 div？

Question

我有一个名为 Target 的空 Div：

<div id="target"></div>

还有一个名为 list 的 div：

<div id="list">
    <ul>
        <li><img id="1" src=".." /></li>
        <li><img id="2" src=".." /></li>
        <li><img id="3" src=".." /></li>
    </ul>
</div>

我想要的是，在用户点击时，将 img 放入 div 目标，并将其大小调整为更大的尺寸。我可以轻松做到这一点。
如果用户单击另一个 div 或另一个按钮（其他地方的箭头或下一步按钮），我希望第一个 div 回到它的位置，并被新的（或列表中的以下内容，或如果是最后一个显示的 div，则为第一个）。
我尝试了几种方法，但我的 jQuery 还不够好。

（在有人问之前，一切都是本地的，如果这改变了任何东西，就没有服务器端）

Answer 1

我完全不确定这是否是最好的方法，甚至是一种有效的方法，但它似乎可以满足您的需求。

DEMO: Using cloning

$("ul li img").on("click", function() {
    var currentImage = $(this);
    var hiddenImage = $("ul li img[hidden='hidden']");

    $("#target").html("");
    currentImage.clone().appendTo('#target');

    hiddenImage.removeAttr("hidden");
    currentImage.attr("hidden", "hidden");
});​

根据 cmets，某些元素可能是视频文件。而不是使用clone()，可以移动元素并留下一个占位符。

DEMO: Using a place-holder

$("ul li img").on("click", function() {
    var currentImage = $(this);
    var lastImage = $("#target img");
    var placeHolder = $("#last-image-position");

    lastImage.insertBefore("#last-image-position");
    $("#last-image-position").remove();

    $("<div id='last-image-position'><div>").insertBefore(currentImage);

    currentImage.appendTo('#target');
});​

编辑
使用实际图像更新了演示。

Answer 2

工作演示交换 div 内容：http://jsfiddle.net/BKNjB/2/

如果我错了，请告诉我。 :)

行为 - 将有 2 个警报 before 和 after，下面的其余部分更有意义。

或者可能是这样的：http://jsfiddle.net/vJTyf/6/ 或者像这样交换图像每次点击图像时交换图像的东西：http://jsfiddle.net/vJTyf/9/（是的，你可以这样做它以更整洁的方式:)

代码

$(document).ready(function() {
    alert(' Before swap HTML in target is :==> ' + $('#target').html());

        var targetHtml = $('#target').html();
        var listHtml = $('#list').html();

        $('#target').html(listHtml);
        $('#list').html(targetHtml);

    alert(' After swap HTML in target is :==> ' + $('#target').html());

});​

Answer 3

也许你的意思是这样的：

$('#target').replaceWith($('#list'));

Answer 4

也许你想要这个

$(function(){
    $('#list li').on('click', 'img', function(e){
        var img=$(this);
        $('#target').html(img.clone()) .width(img.width()).height(img.height());
    });

    $('#target').on('click', function(e){
        $(this).html('').prop('title', '').width(200).height(200); // original size
    })
    .on('mouseenter', function(e){
        if($(this).html()!='') $(this).prop('title', 'Click to clear');
    })
    .on('mouseleave', function(e){
        $(this).prop('title', '');
    });            
});

DEMO.

更新：（您要求的）

$(function(){
    $('#list li').on('click', 'img', function(e){
        if($('#target').html()!='')
        {
            $('#list ul li:empty').html($('#target').html());
        }
        var img=$(this);
        $('#target').html(img).width(img.width()).height(img.height());
    });

    $('#target').on('click', function(e){
        $('#list ul li:empty').html($('#target').html());
        $(this).html('').prop('title', '').width(200).height(200);
    })
    .on('mouseenter', function(e){
        if($(this).html()!='') $(this).prop('title', 'Click to clear');
    })
    .on('mouseleave', function(e){
        $(this).prop('title', '');
    });            
});

DEMO.