jquery - XML\Jquery は、ユーザーの選択に基づいてリストを作成します

Question

さて、私が試して達成する必要があるのは、XML ドキュメントから取得した情報を表示し、更新せずに画面にレンダリングする静的な Web ページを作成することです。私が推測する基本的なAJAXのもの。

トリックは、私がこれを考え抜こうとしているときに、精神的に「論理的な」障壁にぶつかり続けることです.

目的:

- 野球チームの名前、勝敗、引き分けを表示するチャートを用意します。私の XML ドキュメントには「保留中」のステータスがあるため、未完了のゲームは表示されません。（ここで助けが必要です）

-XML ドキュメントから作成されたチームを選択できる選択リストがあります。（終わり）

- 前述の選択リストから特定のチームを選択すると、そのチームで計画されているすべての試合がページの別の領域に表示されます。保留中を含む。基本的に、そのチームに関連付けられているすべてのゲームと日付 (XML ファイルに含まれています)。（ここで助けが必要です）

私がこれまでに持っているもの：

HTML\JS

<!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>
<link rel="stylesheet" href="batty.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Little Batty League</title>
<script type="text/javascript" src="library.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script  type="text/javascript">
   var IE = window.ActiveXObject ? true: false;
   var MOZ = document.implementation.createDocument ? true: false;


   $(document).ready(function(){
            $.ajax({
            type: "GET",
            url: "schedule.xml",
            dataType: "xml",
            success: function(xml) {
            var select = $('#mySelect');
            $(xml).find('Teams').each(function(){
            var title = $(this).find('Team').text();
        select.append("<option/><option class='ddheader'>"+title+"</option>");
                    });
                    select.children(":first").text("please make a selection").attr("selected",true);
                }
            });
        });
     </script>
   </script>
</head>
<body onLoad="init()">
    <!-- container start -->
<div id="container">

        <!-- banner start -->
        <div id="banner">
            <img src="images/mascot.jpg" width="324" height="112" alt="Mascot" />

           <!-- buttons start --> 
            <table width="900" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td><div class="menuButton"><a href="index.html">Home</a></div></td>
                <td><div class="menuButton"><a href="schedule.html">Schedule</a></div></td>
                <td><div class="menuButton"><a href="contact.html">Contact</a></div></td>
                <td><div class="menuButton"><a href="about.html">About</a></div></td>
              </tr>
            </table>
           <!-- buttons end -->

        </div>
        <!-- banner end -->

        <!-- content start -->
        <div id="content">
            <br />
            <form>
                <select id="mySelect">
                    <option>please make a selection</option>
                </select>
            </form>
        </div>
        <!-- content end -->

        <!-- footer start -->
        <div id="footer">
            &copy; 2012 Batty League
        </div>
        <!-- footer end -->

    </div>
    <!-- container end -->
</body>
</html>

XML は次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
    <Schedule season="1">
        <Teams>
            <Team>Bluejays</Team>
        </Teams>

        <Teams>
            <Team>Chickens</Team>
        </Teams>

        <Teams>
            <Team>Lions</Team>
        </Teams>

        <Teams>
            <Team>Pixies</Team>
        </Teams>

        <Teams>
            <Team>Zombies</Team>
        </Teams>

        <Teams>
            <Team>Wombats</Team>
        </Teams>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-10T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Bluejays </Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-01-11T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-01-18T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-19T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-01-21T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-23T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-01-25T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-27T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-01-28T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-30T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-01-31T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-04T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-05T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-07T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-08T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-10T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-12T09:00:00</Date>
        </Game>

                <Game status="Played"> 
            <Home_Team>Pixies </Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-02-14T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-15T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-02-16T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-01-23T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-02-24T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-25T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-26T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-02-27T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-28T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-02-04T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-05T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-07T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-02-08T09:00:00</Date>
        </Game>
    </Schedule>

編集：より簡潔にするために：

JS を使用して XML ファイルから情報を取得し、チャートのような形式でページに表示するにはどうすればよいですか?

特定のチームが選択されると、そのチームだけに関連する情報を別のボックス (上記の段落と同じものではない) に入力する選択リストの if ステートメントをどのようにコーディングしますか?

score 1 · Accepted Answer

jQuery セレクターを引き続き使用する必要があります。

例: いくつかのチームですべてのゲームを選択します

var teamName = "Bluejays";
$(xml).find('Game > Home_Team:contains(' + teamName + '), Game > Away_Team:contains(' + teamName + )').each(function(){
  var date = $(this).siblings('Date').text();
  var status = $(this).parent().attr('status');
  });

xml をトラバースする方法はたくさんあります。

xml 解析の問題への対応:

  $.ajax({
    type: "GET",
    url: "../xml/sdf.xml",
    dataType: ($.browser.msie) ? "text" : "xml",
    success: parseXml
  });
  function  parseXml(xml)
    {
          if ($.browser.msie) {
            var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.loadXML(xml);
            xml = xmlDoc;
          } ...

jquery - XML\Jquery は、ユーザーの選択に基づいてリストを作成します

1 に答える 1

Related

Reference