javascript - 悬停时用 XML 内容更新 DIV

Question

我想做的事情的概念相当简单。我有一个公司 Logo 网格，通过 XSLT 从 XML 文档加载，每个 Logo 都有自己独特的公司简介链接。

我在页面上有一个单独的 div，本质上是一个“预览”框。我想做的是:

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

我一直在摆弄 Jquery load() 函数，将目标文档更改为在悬停时加载——它几乎得到了我想要的，但它将整个目标 XML 文档加载到 div 中。

如何将此目标 XML 数据分离到单独的 div 中？ (我的风格不同) 我假设我会以某种方式使用 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>

这是“预览 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 都加载到页面中，每个都显示一个从 加载的链接图像。期望的效果是悬停时，显示“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 都加载到页面中，每个都显示一个从 <logo-thumb> 加载的链接图像.期望的效果是在悬停时显示 <name> 的内容在“预览名称”div 中，以及 <sdesc> 的内容在“preview-desc”div 中。

Answer 1

为了保留页面的语义和样式表的结构，我尝试这样做:

<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 伪类和 + 组合器来显示或隐藏预览。跨浏览器兼容性存在一些问题。你应该检查 Stu Nicholls site以获得更好的语义和 CSS 示例。