在悬停时使用XML内容更新DIV

Question

我想要做的事情的概念相当简单.我有一个通过XSLT从XML文档加载的公司徽标网格,每个徽标都有自己唯一的公司配置文件链接.

我在页面上有一个单独的div,本质上是一个"预览"框.我想要做的是:

我滚动一个徽标,它将公司名称和简短描述加载到预览div中.此内容通过XML加载.

我一直在搞乱Jquery load()函数,将目标文档更改为在Hover上加载 - 它几乎得到了我想要的东西,但它将整个目标XML文档加载到div中.

如何将此目标XML数据分成单独的div？(我的风格不同)我假设我会以某种方式使用Ajax.我想将<name>节点加载到name_div中,将<desc>节点加载到description_div中,并在hover上更新它们.在此先感谢您的帮助!

以下是我正在使用的代码的一些示例:

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>

这是"预览div"的HTML结构:

<div id="preview">

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

</div>

所有3个公司徽标都被加载到页面中,每个徽标都显示从中加载的链接图像.期望的效果是悬停,显示"preview-name"div中的内容,以及"preview-desc"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>

这是"预览div"的HTML结构:

<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>"preview-name"div中的内容,<sdesc>以及"preview-desc"div中的内容.

Answer 1

严格来说，你load()可以在 url 后面加上一个选择器，只返回 ajax 调用的一部分。

所以，像这样：

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

现在，每次想要查看某些内容时都进行网络调用并不是很高效。您可能希望将输出缓存到变量中。