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

根据评论，一些元素可能是视频文件。可以移动元素并留下占位符，而不是使用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.

我该怎么换掉那两个div？

4 个答案: