Здравствуйте. Помогите, пожалуйста решить проблему.
Нужно, чтобы при нажатии на кнопку, один блок всегда заменялся другим, и при нажатии на другую кнопку, возвращался первый блок.
Код:
$(document).ready(function() {
$("#main").click(function() {
$("div.news-detail").replaceWith(news);
});
var image = $("div#kart").wrap().html();
var anons = $(".news-detail span").wrap().html();
var data = $("#data-detail").wrap().html();
var detail = $(".news-detail").detach();
var news = $(".new");
$("div.center-b div.brown").append(image);
$(".center-b p").append(anons+"...");
$(".center-b .data").append(data);
$("#news").click(function() {
$(".new").replaceWith(detail);
});
});
html:
<div class="new">
<div class="left-b">
<div class="brown"></div>
<div class="data"></div>
<p></p>
<div class="detail"></div>
</div>
<div class="center-b">
<div class="brown"></div>
<div class="data"></div>
Новости
<p></p>
<div class="detail" id="news">Подробно</div>
</div>
<div class="right-b">
<div class="brown"></div>
<div class="data"></div>
<p></p>
<div class="detail"></div>
</div>
</div>
<div class="news-detail">
<h1><span>Заголовок</span></h1>
<div id="kart"><img src="images/vi.jpg"></div>
<p>текст текст текст текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст</p>
<p id="data-detail">07.02.2013</p>
<div class="detail" id="main">Назад</div>
</div>
Один раз это срабатывает, но, вернувшись к блоку .new, второй раз уже нельзя заменить его на .news-detail . А как сделать так, чтобы можно было постояно менять их туда и обратно?
И еще вопрос: почему, если я ставлю строки
$("#main").click(function() {
$("div.news-detail").replaceWith(news);
});
в самый низ (то есть, переменные задаются выше этих строк), при нажатии на блок #main ничего не происходит?