Обновление DIV с содержимым XML при зависании

Question

Концепция того, что я пытаюсь сделать, довольно проста. У меня есть сетка логотипов компании, загружаемых через XSLT из XML-документа, каждый со своими уникальными ссылками на профили компании.

У меня есть отдельный div на странице, по существу, «превью». Я хочу сделать следующее:

Я просматриваю логотип, и он загружает имя компании и краткое описание в div предварительного просмотра. Этот контент загружается через XML.

Я уже возился с функцией загрузки JQuery(), меняя целевой документ для загрузки на Hover —, и он почти получает то, что я хочу, но он загружает весь целевой XML-документ в div.

Как отделить эти целевые XML-данные от отдельных разделов? (что я написал иначе) Я бы предположил, что я каким-то образом воспользуюсь Ajax. Я хочу загрузить узел <name> в name_div и узел <desc> в description_div и обновить их при наведении. Заранее спасибо за помощь!

Вот некоторые примеры кода, я работаю с:

portfolio.xml файл (этот файл является моей главной страницы, отображение сетки и предварительный просмотр DIV, пример использует 3 компании):

<portfolio> 
    <company> 
     <name>ABC Company</name> 
     <sdesc>Consumer products</sdesc> 
     <logo-thumb>abcco.jpg</logo-thumb> 
     <link>abcco.xml</link> 
    </company> 

    <company> 
     <name>DEF Company</name> 
     <sdesc>Communications firm</sdesc> 
     <logo-thumb>defco.jpg</logo-thumb> 
     <link>defco.xml</link> 
    </company> 
    <company> 
     <name>GHI Corporation</name> 
     <sdesc>Electronic products</sdesc> 
     <logo-thumb>ghico.jpg</logo-thumb> 
     <link>ghico.xml</link> 
    </company> 
</portfolio> 

следующие XSLT показывает, что код на странице:

<xsl:for-each select="portfolio/company"> 
    <xsl:sort select="name" /> 

     <div class="invest-port-thumb"> 
     <a> 
     <xsl:attribute name="href"> 
       <xsl:value-of select="link" /> 
     </xsl:attribute> 

     <img> 
     <xsl:attribute name="src"> 
       <xsl:value-of select="logo-thumb" /> 
     </xsl:attribute> 
     </img> 
     </a> 
     </div> 

</xsl:for-each> 

Это HTML структура "Предварительный просмотр" DIV:

<div id="preview"> 

<div id="preview-name"> [Name to display here] </div> 
<div id="preview-desc"> [Description to display here] </div> 

</div> 

Все логотипы компании 3 загружаются на страницу, каждая из которых отображает связанное изображение, загруженное с. Желаемый эффект - это наведение, отображение содержимого в div «preview-name» и содержимое в div «preview-desc».

---

Позвольте мне попытаться быть более конкретным. Вот некоторые примеры:

portfolio.xml файл (этот файл является моей главной страницы, отображение сетки и предварительный просмотр DIV, пример использует 3 компании):

<portfolio> 
    <company> 
     <name>ABC Company</name> 
     <sdesc>Consumer products</sdesc> 
     <logo-thumb>abcco.jpg</logo-thumb> 
     <link>abcco.xml</link> 
    </company> 

    <company> 
     <name>DEF Company</name> 
     <sdesc>Communications firm</sdesc> 
     <logo-thumb>defco.jpg</logo-thumb> 
     <link>defco.xml</link> 
    </company> 
    <company> 
     <name>GHI Corporation</name> 
     <sdesc>Electronic products</sdesc> 
     <logo-thumb>ghico.jpg</logo-thumb> 
     <link>ghico.xml</link> 
    </company> 
</portfolio> 

следующие XSLT дисплеи, код на странице :

<xsl:for-each select="portfolio/company"> 
    <xsl:sort select="name" /> 

     <div class="invest-port-thumb"> 
     <a> 
     <xsl:attribute name="href"> 
       <xsl:value-of select="link" /> 
     </xsl:attribute> 

     <img> 
     <xsl:attribute name="src"> 
       <xsl:value-of select="logo-thumb" /> 
     </xsl:attribute> 
     </img> 
     </a> 
     </div> 

</xsl:for-each> 

Это HTML структура "предварительного DIV":

<div id="preview"> 

<div id="preview-name"> [Name to display here] </div> 
<div id="preview-desc"> [Description to display here] </div> 

</div> 

Все 3 логотипа компании загружаются на страницу, каждая из которых отображает связанное изображение, загруженное с <logo-thumb>. Желаемый эффект состоит в том, чтобы навести курсор, отобразить содержимое <name> в div «preview-name» и содержимое <sdesc> в div «preview-desc».

Answer 1

Строго говоря, вы, load(), можете выбрать селектор после URL-адреса и вернуть часть вызова ajax.

Так, что-то вроде:

$('#name_div').load('/path/yourXmlFile.xml name:first'); 

Теперь, делая сеть вызовов каждый раз, когда вы хотите посмотреть на что-то не очень эффективным. Вероятно, вы захотите кэшировать вывод в переменную.

Answer 2

Сохранение семантики вашей страницы и структуру таблицы стилей, я пытаюсь сделать что-то вроде этого:

<xsl:for-each select="portfolio/company"> 
    <xsl:sort select="name" /> 
    <div class="invest-port-thumb"> 
     <a href="{link}"><img src="{logo-thumb}" /></a> 
     <div class="preview"> 
     <div class="preview-name"><xsl:value-of select="name" /></div> 
     <div class="preview-desc"><xsl:value-of select="sdesc" /></div> 
     </div> 
    </div> 
</xsl:for-each> 

Затем в CSS стилей, вы можете использовать :hover pseudoclass и + комбинатор, чтобы показать или скрыть предварительный просмотр. Там есть некоторые проблемы с совместимостью crossbrowser. Вы должны проверить Stu Nicholls site для лучшей семантики и примеров CSS.

Answer 3

Я бы назвал имя и опустился в якорь как часть якоря или его дочернего образа, возможно, используя тег ALT для имени и тега REL для описания.

При наведении курсора на любой якорь я использую jQuery [.attr()], чтобы захватить значения атрибутов, содержащие имя и описание, которые вы хотите, и направить их в соответствующие целевые DIV.

(см «Рецепт Категории» в http://www.masterchef.com.au/home.htm для подобного примера)