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

【问题标题】：Updating DIV with XML content on hover在悬停时使用 XML 内容更新 DIV
【发布时间】：2011-03-03 13:52:50
【问题描述】：

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

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

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

我一直在搞乱 Jquery load() 函数，将目标文档更改为在 Hover 上加载——它几乎得到了我想要的，但是它将整个目标 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 个公司徽标都加载到页面中，每个都显示从加载的链接图像。想要的效果是在悬停时，显示“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> 加载的链接图像。想要的效果是在悬停时，在“preview-name”div中显示<name>的内容，在“preview-desc”div中显示<sdesc>的内容。

【问题讨论】：

我有兴趣（学术上）了解通过 XMLHttpRequest 加载 XML 时 XSL 是否/如何工作
您没有考虑过通过 ajax 将整个文档加载到 jquery 中，解析 XML，然后将必要的信息附加到每个元素？如果你愿意，会详细说明..
这是另一种选择。我只是认为这将更难做到。目前，我的页面设置就像我想的那样。我在 XML 文件中有所有公司，每个公司都有他们的名称和描述。我只是不确定如何将其分开并根据我悬停的图像显示内容。
@Andrew：为了提供完整的答案，我们需要输入和输出示例。如果链接和预览的所有数据都在一个 XML 文档中，您可以在一个 XSLT 样式表中运行它（稍后使用 CSS 应用样式）
就你的做法而言，我强烈倾向于在这种情况下做 xml 处理服务器端，然后你可以做更多的 UI/HTML/CSS/JavaScript干净地。 StackOverflow 问题：如果您需要使用“编辑”功能更新您的问题，请不要将其作为新答案。

标签： javascript jquery xml ajax

【解决方案1】：

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

所以，类似：

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

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

【讨论】：

好点。我不限于那种显示方法——这只是我尝试过的东西。目前，显示整个网格的文件源已经包含我需要以 XML 显示的所有数据。关于如何根据滚动的图像将已加载的数据显示到 div 中的任何见解？
您需要在 xml 中的内容和您的 div 之间创建关联。 Perhaos 进入翻转的图像，你会添加一个像 id="image-55" 这样的 id 然后在你的 xml 中你有一个也嵌入 id 的结构，比如 <container id="image-55">...</container>

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

【讨论】：

预览框会一直可见，并包含上一个滚动的公司的信息，直到您滚动一个新的...使用 value-of 的问题是它只会拉我的 XML 文件中的第一个节点，而不是我悬停在上面的那个。
@Andrew：你想让异步的东西同步！您拥有 XML 文档中的所有数据。然后用 XSLT 转换它。最后，使用 CSS 应用样式（当然，在您的转换中添加一个链接元素）。复杂性不在 XSLT 中（我发布的那个工作得很好。如果您发布完整的样式表，我们可以为您提供更多帮助）。复杂性在于您的布局的跨浏览器 CSS。例如，检查 Nicholls 的网站。有关我所说的活生生的例子，请查看我的网站之一：aranedabienesraices.com.ar
我同意亚历杭德罗的观点。您需要从 XSLT 中加载您想要的 HTML。然后，您可以隐藏除正在预览的 DIV 之外的所有 DIV。您还可以为每个预览数据 DIV 提供一个 ID，然后根据该 ID 使用预览数据加载预览 DIV。 ID 可以对应于用户悬停的任何内容。

【解决方案3】：

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

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

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

【讨论】：