用jQuery交换div内容

问题描述

这是我的HTML：

 < div class =large> 
< img src =/ images / photos / Interior.jpgalt =室内style =[...]/> 
< div class =caption>内部< / div> 
< / div> 
< div class =small> 
< img src =/ images / photos / Bedroom.jpgalt =Bedroomstyle =[A different ...]/> 
< div class =caption>一间卧室< / div> 
< / div> 
  

点击 div.small ，我'd像图像和标题交换容器div。问题是我不能只交换src，因为有一些内联样式需要保留。最后，一旦图像被交换后，我想将自定义函数 .fitToParent（）应用于它们两个。

$（document）。

ready（function（）{
$（'div.small'）。click（function（）{
var bigHtml = $（'div.large'）。html（）;
var smallHtml = $（this）.html（）;

'（'div.large'）。html（smallHtml）;
$（'div.small'）。html（bigHtml） ;

//自定义函数？
}）;
}）;

Here's my 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>

Upon clicking a div.small, I'd like both the images and captions to swap container divs. The catch is I can't just swap the src, as there are a bunch of inline styles set which need to be preserved. Finally, once the images have been swapped, I want to apply my custom function .fitToParent() to both of them.

How would I go about doing this?

解决方案

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

这篇关于用jQuery交换div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！