0

可能是一个非常基本的问题..

但我有一个嵌入图像的简单表格......所以让我们说这样的话

<tr>
    <td align="center">

        <img src="wiki-thumbs/Picture1.png" height="55%" width="80%" class="linksESPN" />

    </td>
    <td align="center">

        <img src="wiki-thumbs/Picture2.png" height="55%" width="80%" class="linksESPN" />

    </td>
  </tr>

现在，所以 Picture1.png 在名为 Picture1.xml 的文件中有相应的“xml”数据

所以我在这里找到了一个非常简单的解决方案：在 HTML 页面中显示 XML 内容

但是..我如何从文件中读取这些 xml。这也是因为图像名称和 xml 文件名称相同.. 我可以巧妙地做到这一点吗？

4

2 回答 2

1

在服务器端执行此操作可能会更好，但问题涉及 jQuery 和 AJAX，因此，假设 xml 文件在您自己的域中：

  1. 对于每个图像，创建一个textarea. 为每个设置一个 id，textarea以便您可以将每个图像与 right 相关联textarea。

  2. 在 jQuery 中，使用选择器来查找页面上所有带有 class 的图像linksESPN。

  3. 使用each函数循环浏览这些图像。

  4. 获取src每个图像的 ，将图像的目录替换为 pdf 文件所在位置的目录，并将图像的扩展名替换为 pdf.

  5. 使用load函数将 XML 的内容加载到图像对应的textarea.

于 2013-03-09T19:06:16.760 回答
0

听起来您提供的链接与您的要求没有任何关系。如果我正确理解您的问题，您正在尝试解析 xml 数据并将其插入您的 HTML 表中。您可以为此使用 jQuery。

您应该只创建一个包含所有图像的所有数据的 xml 文件，而不是为每个图像创建一个 xml 文件。这样你只需要发出一个 http 请求。

这是一个例子：

XML

<?xml version="1.0"?>
<images>
    <image id="img1">
        <details>
            Here is a bunch of details for image 1.
        </details>
    </image>
    <image id="img2">
        <details>
            Here is a bunch of details for image 2.
        </details>
    </image>
</images>

HTML

<table id="table">
    <tr>
        <td>
            <img src="img1.png" alt="img" />
            <div id="img1" class="details">

            </div>
        </td>
        <td>
            <img src="img2.png" alt="img" />
            <div id="img2" class="details">

            </div>
        </td>
    </tr>
</table>

jQuery

$(function(){

    // Make an ajax call to the server to get the xml file.
    $.ajax({
        // The URL where the xml file exists.
        url: 'data.xml'
    })
    // Jquery's callback that handles a failed request. I'm just logging the message to the console.
    .fail( function( jqXHR, textStatus){ console.log( textStatus ); } )
    // Jquery's callback that handels success. Here Im executing the insertData() function.
    .done( insertData( ) );


    function insertData(  ){
        // The .done() method is expecting a funciton as it's parameter so we are returning one.
        // .done() executes that function passing the requested data in. 
        // I named it data.
        return function( data ){

            // You can parse the xml data using jquery selection methods.  I'm using find().
            // This gets all the <image> object from our xml.
            var images = $(data).find('image');

            // For each <image> object do the following.
            images.each(function(){

                // Find the id of the <image> object.
                var id = $(this).attr('id');
                // Find the text of the <image> object.
                var text = $(this).find('details').text();

                // I chose to associate the table elements in the html with the xml data via an id attribute.
                // The data in the xml has the same id as the details div in my html.  
                // Here I just select the details div and insert the text that we got from above.
                $( '#'+id ).text( text );
            });
        };
    };
});
于 2013-03-09T20:48:34.673 回答