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个公司徽标都加载到页面中，每个徽标都显示从中加载的链接图像。期望的效果是悬停，显示“预览名称”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>加载的链接图像。所需效果是悬停时，在“preview-name”div中显示<name>的内容，在“preview-desc”div中显示<sdesc>的内容。

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

Answer 2

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

所以，比如：

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

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

Answer 3

我会将名称和desc作为锚点或其子图像的一部分提供给锚点，也许使用ALT标记作为名称，使用REL标记作为描述。

将鼠标悬停在任何锚点上时，我将使用jQuery [.attr（）]获取包含所需名称和描述的属性值，并将其吐入各自的目标DIV。

（有关类似示例，请参阅http://www.masterchef.com.au/home.htm中的'配方类别'）

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

3 个答案: