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各画像を右の画像と関連付けることができるようにします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 を使用できます。

画像ごとに 1 つの xml ファイルを作成する代わりに、すべての画像のすべてのデータを保持する 1 つの xml ファイルを作成する必要があります。そうすれば、http リクエストを 1 回行うだけで済みます。

次に例を示します。

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 に答える