使用懸停的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類似的例子）