2

I got an empty Div called Target :

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

and a div called list :

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

What I want is, on user click, get the img into div target, and adjust his size to something bigger. I can do this easy.
The troubles come where if the user clicks on another div, or another button (arrow or next button elsewhere) I want the 1st div to get back to its place, and be replaced by the new one (or the following in the list, or the 1st if its the last div who's on display).
I tried a couple of ways but my jQuery ain't yet good enough.

( before someone ask, everything is local, no server side if this changes anything )

4

4 回答 4

3

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

演示：使用克隆 

$("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()一个可以移动元素并留下一个占位符。

演示：使用占位符

$("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');
});​

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

于 2012-06-18T23:49:18.713 回答
3

工作演示交换 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());

});​
于 2012-06-18T23:56:47.363 回答
2

也许你的意思是：

$('#target').replaceWith($('#list'));
于 2012-06-18T23:45:58.930 回答
1

也许你想要这个

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

演示。

更新：（你要求的）

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

演示。

于 2012-06-19T00:47:22.983 回答