2009-09-04 4 views
8

Вот мой HTML:обменивая содержимое DIV с JQuery

<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, я хотел бы как изображения и надписи поменять местами контейнера дивы. Уловка я не могу просто поменять src, так как есть набор встроенных стилей, которые необходимо сохранить. Наконец, как только изображения были заменены, я хочу применить свою пользовательскую функцию .fitToParent() к обоим из них.

Как бы я это сделал?

+8

Lol rofl и т.п. !! Я просто обнаружил, что ищу хороший способ поменять содержимое div с помощью jQuery. И посмотрите, кто ответил на этот вопрос ..... – Ropstah

ответ

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

Спасибо за помощь. Кто-нибудь знает, почему я теряю ваши строки, вставляя их в Visual Studio? – Eric

+3

Это отлично работает, но вы теряете любые события, связанные с divs (например, «controlName.change()». Использование detach и append сохраняет события. См. Http://stackoverflow.com/a/9719297/1359088 –

0

Изменить разметку немного:

<div id="large"> 

<div id="small"> 

, а затем в JavaScript, вы можете сделать:

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

Очевидно, что это может быть очищен, но вы получите идею.

+0

Изменение на id не вариант, так как существует более одного 'div.small' – Eric

1
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> 

Надеюсь, это поможет.

Смежные вопросы