Переменная jQuery XML в <a href?
Я действительно нуждаюсь в помощи. Я новичок в HTML5 и JQuery, и я уверен, что это вопрос дампа, но здесь идет...
У меня есть панель навигации уровня 1, которая загружает эскизы клиентских проектов. Пользователь нажимает и project_details.xml файл открыт. Он отображает первый элемент - название проекта, изображение проекта и описание изображения. Это все работает.
Моя проблема с этой панелью навигации уровня 2. Он состоит из простых текстовых ссылок в левой части страницы. При нажатии на ссылку название проекта, изображение и описание должны измениться на правильное (элемент). Я могу передать название проекта и изображение, но не могу заставить работать описание изображения. Кажется, потому что это <html> текст. Я могу передать его, если переместу в местоположение labelText. Но тогда мои ссылки исчезли.
Что я делаю неправильно?
Большое спасибо, Сильвия
//Level 2 Project Navigation Bar
$("#project-nav").append('<div id="projectBut"><a href=' + insertLargeImageLink + ' id=' + projectTag + ' class="clickProjectBut">' + labelText + '</a></div>');
});
//this changes the level 2 product content tags (when projectBut is clicked the main content on the page changes)
$('a.clickProjectBut').click(function (e){
e.preventDefault();
var i= $(this);
var insertLargeImageLink= (i).attr('href');
var labelText= (i).text()
var imageDesc=
$("#project-title").replaceWith('<html><div id="project-title">' + labelText + '</div></html>');
$("#slideshow").replaceWith('<div id="slideshow"><img src=' + insertLargeImageLink + ' alt=" " width="500px" height="500px"></div>');
$("#project-desc").replaceWith('<html><div id="project-desc">' + imageDesc + '</div></html>');
});
Вот HTML-код, который будет вставлен в:
<aside id="sideImage">
<div id="thumbnail-content">
<div id="allThumbHolder"></div>
<div id="project-nav"></div>
</div>
<div id="content">
<div id="controls" class="controls"></div>
<div id="back"><Back</div>
<div id="project-slideshow-container">
<div id="client-name"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
<div id="caption-container"></div>
<div id="caption">
<div id="project-title"></div>
<div id="project-desc"></div>
</div>
</div>
<div id="thumbs" class="navigation" style="width: 700px; float: left; background-color:#ccc; opacity: 1;"> </div>
</div>
<div style="clear: both;"></div>
</aside>
XML форматируется так:
<?xml version="1.0" encoding="utf-8"?>
<slideshow>
<project client_name="Client 1">
<full_images>
<item type="web" tag="Project 1" textX="450" textW="500" display_image="../portfolio/images/wv-client_name/full-size/web-1-480pix.jpg">
<label_text><![CDATA[<p>Project 1 - Title</p>]]></label_text>
<desc_text><![CDATA[<h3>Project 1 - Description desc text </h3><p>paragraph text </p>]]> </desc_text>
</item>
<item type="web" tag="Project 2" textX="450" textW="500" display_image="../portfolio/images/wv-client_name/full-size/web-2-480pix.jpg">
<label_text><![CDATA[<p>Project 2 - Title</p>]]></label_text>
<desc_text><![CDATA[<h3>Project 2 - Description desc text</h3><p>paragraph text</p>]]></desc_text>
</item>
</full_images>
</project>
</slideshow>
Я нашел ответ после тонны проб и ошибок.
Вот что работает:
$("#project-nav").append('<p><a href="#" id=' + projectTag + ' class="clickProjectBut">' + projectTitle + '</a></p>');
$('a.clickProjectBut').click(function (e){
e.preventDefault();
var i= $(this);
var thisId= $(this).attr('id');
var projectTitle= $(this).text()
var projectDesc= $(response).find('desc_text').eq(thisId-1).text()
$("#project-title").replaceWith('<div id="project-title">' + projectTitle + '</div>');
$("#slideshow").replaceWith('<div id="slideshow"><img src=' + insertLargeImageLink + ' alt=" " width="500px" height="500px"></div>');
$("#project-desc").replaceWith('<html><div id="project-desc">' + projectDesc + '</div></html>')
});