Permutation contenu div avec jQuery

Question

Voici mon code 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> 

Après avoir cliqué sur un div.small, je voudrais les deux images et des légendes à échanger divs conteneurs. Le hic, c'est que je ne peux pas changer le src, car il y a un tas de styles en ligne qui doivent être conservés. Enfin, une fois les images échangées, je souhaite appliquer ma fonction personnalisée .fitToParent() aux deux.

Comment ferais-je cela?

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

Changer votre balisage un peu:

<div id="large"> 

<div id="small"> 

Et puis dans le Javascript que vous pouvez faire:

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

Évidemment, il peut être nettoyé, mais vous voyez l'idée.

Answer 3

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> 

Espérons que cela aide.