2

さて、私は HTML、CSS、そして (できれば) XML を使用して Web サイトを設計しています。XML を使用しようとしている Web サイトの特定のセクションがあり、希望する方法で XML を組み込むのに苦労しています。

私の問題は、XML を使用して画像 (または画像ディレクトリ) を読み取り、for ループを介して呼び出しコマンドを使用して HTML Web サイトに出力する方法を見つけようとしているため、単純にデータを XML ファイルに入力できることです。属性を使用して、サイトの任意のページに対して簡単に呼び出すことができます。最終的には検索バーを追加することも検討していましたが、属性と要素を追加できる XML は優れたアドオンであると言われました。 編集：画像をXMLにプルする間違ったコマンドを使用していると思います。それに関する情報は役に立ちます。

注: 簡単にするために、HTML と XML のコーディングは、問題のある部分だけに絞りました。

ここに私のXMLファイルがあります

<inventory>
<shirt>
    <picture><image href="tank_top.jpg"/></picture>
    <name>Tank Top</name>
    <description>This is a tank top. </description>
    <price>$12.00</price>
</shirt>
<shirt>
    <picture><image href="sweater.jpg"/></picture>
    <name>Sweater</name>
    <description>This is a sweater. </description>
    <price>$15.00 </price>
</shirt>
<shirt>
    <picture><image href="hoodie.jpg"/></picture>
    <name>Hoodie</name>
    <description>This is a hoodie. </description>
    <price>$17.00 </price>
</shirt>
<shirt>
    <picture><image href="long_sleeve_shirt.jpg"/></picture>
    <name>Long-Sleeve</name>
    <description>This is a long-sleeve. </description>
    <price>$20.00 </price>
</shirt>
<shirt>
    <picture><image href="t-shirt.jpg"/></picture>
    <name>T-Shirt</name>
    <description>This is a t-shirt. </description>
    <price>$50.00 </price>
</shirt>
</inventory>

これが私のJavascriptです

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","Example.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var x=xmlDoc.getElementsByTagName("shirt");
 for (i=1;i&lt;x.length+1;i++)
  {
   document.write(x[i].getElementsByTagName("picture")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
   document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
  }

写真の最初の「document.write」コマンドの代わりに、以下のコードを使用してみました。

var img=新しい画像(); img.src='insert_image_title_here'; document.body.appendChild( img );

しかし、これは他のすべてが読み込まれた後に私の画像をページの一番下に送るだけでした。そして、残りの情報が印刷されるたびに、タイトルの付いたさまざまな画像を読み込む必要があります (つまり、画像、名前、説明、価格の順に印刷する必要があります。次に、別の画像と独自の情報が保存されている必要があります)。 XML ファイル)。

TL;DR: XML ファイルを読み取る JS を介して、HTML で画像を出力する必要があります。また、for ループに印刷コマンドがネストされているため、画像を取得するには XML ファイルが必要です。単純化された XML および HTML コードは上記のとおりです。解決策を何時間も探しました。何も役に立ちませんでした。

注: 私は高校生になったばかりで、数年間 (主に Java を使用し、HTML に手を出して) コーディングを行っていますが、コーディングの世界にはまだ慣れていません。今日から XML の使い方を学び始めました。すべての説明は驚くほど役に立ちます。また、役立つと思われる Web ソースや本を含めてください。本当にありがとう！

4

1 に答える 1

1

コンテンツを表にまとめてみてください。また、次のように、オブジェクトのforループonloadまたはonreadystatechangeプロパティを配置します。xmlhttp

xmlhttp.onload = function() {
    //for loop here...
};
//and then send the request
xmlhttp.send();

xmldoc.documentElement.getElementsByTagNameではなく使用しxmldoc.getElementsByTagNameます...

更新: グローバルの使用を避け、var変数の宣言に使用してください。

于 2013-03-01T04:04:03.217 に答える