2015-04-05 6 views
0

Я борюсь с этим, надеюсь, кто-то может помочь.замените содержимое div с нажатым div-содержимым с помощью jquery

То, что я пытаюсь достичь на щелчку DIV, заменить этот DIV другой, так что если у меня есть

<div class="nibbles"><img src="something"/><h1>Something</h1><p>something</p></div> 
<div class="nibbles"><img src="something"/><h1>Something</h1><p>something</p></div> 
<div class="nibbles"><img src="something"/><h1>Something</h1><p>something</p></div> 
<div class="nibbles"><img src="something"/><h1>Something</h1><p>something</p> 

Если я нажимаю любого из этих див, что DIV должно быть заменены ниже сОн

<div class="picked_nibble"></div> 

А если нажать на другую .nibble div.picked_nibble обменят для этого содержимого. Я пробовал много комбинаций с .html и .replaceWith, но не могу заставить его работать? См. Это jsfiddle

Если я могу в конечном итоге заставить это работать, я хотел бы иметь анимацию затухания, когда содержимое появляется или заменяется, а также добавляется содержимое для ввода формы для отправки позже?

ответ

1

нижеследующий код. с эффектом fadeIn. проверить DEMO

UPDATE: сохранить h6 значение текстового поля

$('.nibble_pick').click(function() { 
    $('.nibble_choice').hide().html($(this).html()).fadeIn('slow'); 
    $('#title').val($(this).find('h6').html()); 
}); 
1
$('div.nibbles').click(function(){ 
    var innerContent = $(this).html(); 
    $('div.picked_nibble').hide().html(innerContent).fadeIn('slow'); 
    $('#input').val($(this).find('h1').text()); 
}); 
+0

гениально! спасибо, как я мог объединить это с получением содержимого h1 в поле? –

+0

Это должно быть сделано. Почему divs в селекторах, хотя ... – Shikkediel

+0

извините, не понимаете? –

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