交换格内容与jQuery

Question

下面是我的HTML：

<div class="large">
    <img src="/images/photos/Interior.jpg" alt="The interior" style="[...]" />
    <div class="caption">The interior</div>
</div>
<div class="small">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" style="[A different ...]" />
    <div class="caption">A bedroom</div>
</div>

在点击一个div.small，我想两个图像和字幕，以交换div容器。美中不足的是，我不能只是交换了SRC，因为有一大堆内嵌样式集需要被保存下来。最后，一旦图像已被调换，我想我的自定义功能.fitToParent()对两者都适用的。

我怎么会去这样做呢？

Answer 1

$(document).ready(function() {
    $('div.small').click(function() {
        var bigHtml = $('div.large').html();
        var smallHtml = $(this).html();

        $('div.large').html(smallHtml);
        $('div.small').html(bigHtml);

        //custom functions?
    });
});

Answer 2

function swapContent(){
   var tempContent = $("div.large").html();
   $("div.large").empty().html($("div.small").html());
   $("div.small").empty().html(tempContent);   
}

<div class="large">
    <img src="/images/photos/Interior.jpg" alt="The interior" style="[...]" />
    <div class="caption">The interior</div>
</div>
<div class="small" onclick="swapContent()">
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" style="[A different ...]" />
    <div class="caption">A bedroom</div>
</div>

希望它帮助。

Answer 3

更改你的标记一点：

<div id="large">

<div id="small">

然后在JavaScript的你可以做的：

var swap = function(fromId, toId){
    var temp = $(toId).html();
    $(toId).html($(fromId).html());
    $(fromId).html(temp);
}

显然，它可以被清理，但你的想法。