0

2ページ使用しています。

  • HTML ファイル: 24.html
  • XML ファイル: itemdata.xml

id="24" のみのアイテムからデータを取得するにはどうすればよいですか? 現時点では、すべてのアイテムとその情報を取得し、各アイテムを HTML ページに表示します。

HTML ファイル: "24.html"

`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Item 24 - Kermit Frog</title>

    <script type="text/javascript">

    $(document).ready(function()
      {
        $.get('itemdata.xml', function(d){
        $('body').append('<h1> My Item Directory</h1>');
        $('body').append('<dl />');

        $(d).find('item').each(function(){

            var $item = $(this); 
            var title = $item.attr("title");
            var price = $item.find('price').text();
            var imageurl = $item.attr('imageurl');
            var status = $item.attr('status');
            var src = $item.find('src').text();
            var color = $item.find('color').text();
            var size = $item.find('size').text();

            var html = '<dt> <img class="itemImage" alt="" src="' + imageurl + '" /> </dt>';
            html += '<dd> <span class="loadingPic" alt="Loading" />';
            html += '<p class="title">' + title + ' <span class="status"> ' +status + ' </span></p>';
            html += '<p> ' + size + '</p>' ;
            html += '<p> Valued at: $' + price + '</p>' ;
            html += '<p><a href=" ' + src + ' " target="_blank">More Info</a></p>' ;
            html += '</dd>';

            $('dl').append($(html));

            $('.loadingPic').fadeOut(1400);
        });
    });
});
    </script>

</head>
<body>
</body>
</html>

`

XML ファイル: "itemdata.xml"

`

<?xml version="1.0" encoding="utf-8" ?>
    <items>
    <item title="Teddy Bear" imageurl="http://www.website.com/images/tan.png" status="New" id="10">
        <price>49</price>
        <src>http://www.website.com/10.html</src>
        <color>tan</color>
        <size>medium</size>
        </item>
        <item title="Kermit Frog" imageurl="http://www.website.com/images/frog.png" status="Like New" id="24">
        <price>5</price>
        <src>http://www.website.com/24.html</src>
        <color>green</color>
        <size>small</size>
        </item>
        <item title="Superman Action Figure" imageurl="http://www.website.com/images/superman.png" status="Antique" id="5">
        <price>35</price>
        <src>http://www.website.com/5.html</src>
        <color>Red &amp; Blue</color>
        <size>large</size>
        </item>
     </items>

`

また、特定のアイテムに関するデータを新しいウィンドウ/ページにロードし、現在のすべてのコンテンツをそのまま表示することにもオープンです。例: 1 つの項目のデータを新しい/現在のウィンドウに呼び出すリンク。

サンプルのウェブサイトをホストしてほしい場合 -> 上記の例でそれを行うことができます。

ありがとうございました、

4

0 に答える 0