使用悬停的XML内容更新DIV

Question

我想要做的事情的概念非常简单。我有一个从XML文档通过XSLT加载的公司标识网格，每个标识都有自己独特的公司配置文件链接。

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

我翻转了一个标志，它将公司名称和一个简短描述加载到预览div中。此内容通过XML加载。

我一直在搞乱Jquery的load（）函数，改变目标文件加载悬停—，它几乎得到我想要的，但它将整个目标XML文档加载到div中。

我该如何将这个目标XML数据分离成单独的div？ （我有不同的风格） 我假设我会以某种方式使用Ajax。我想将<name>节点加载到name_div中，并将<desc>节点加载到description_div中，并在悬停时更新它们。先谢谢您的帮助！

这里是我的工作代码的一些例子：

portfolio.xml文件（该文件是我的主要页面，显示网格和预览格，例如使用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 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文件（该文件是我的主要页面，显示网格和预览格，例如使用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 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

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

Answer 3

我会将名称和desc作为锚的一部分或它的子图像，可能使用名称的ALT标签和描述的REL标签。

将鼠标悬停在任何锚点上，我将使用jQuery [.attr（）]来获取包含您想要的名称和描述的属性值，并将其分配到各自的目标DIV中。

（见“配方类别”中http://www.masterchef.com.au/home.htm类似的例子）