• 締切済み

jQueryMobileでテキスト分岐ゲーム

JavaScript&jQuery初心者です。 JavaScriptの勉強のために、jQueryMobileを使って、スマホ向けの簡単なテキストゲームを作ってみましたが、変数で処理の分岐のさせ方がわかりません。 ページがロードされたときに、have_mapが決まってしまいます。 以下のサンプルだと、常に地図を手に入れた状態で宿屋に行けてしまいます。 ボタンの選択によって、状態を変数に入れて、分岐などに使いたいのですが。。。 そもそも、変数定義の流れがよく分かっていないのだと思うのですが。。。 アドバイスがいただけるとうれしいです。 よろしくお願いいたします。 コードはこちらになります。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ChooseAvatar</title> <!-- jQuery MobileのCSSを読み込む --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" /> <!-- jQuery本体を読み込む --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <!-- jQuery MobileのJSを読み込む --> <script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script> </head> <body> <script> var have_map = 0; </script> <div id="page1" data-role="page"> <div data-role="header" > <h1>質問１</h1> </div> <div data-role="content" align="center"> <p> 宝箱を見つけた<br> </p> <p> <a href="#page2" data-role="button">開ける</a> <a href="#page3" data-role="button">開けない</a> </p> <script> have_map = 0; </script> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> <div id="page2" data-role="page"> <div data-role="header" > <h1>宝箱</h1> </div><!-- /header --> <div data-role="content" align="center"> <p> 地図を手に入れた<br> </p> <p> <a href="#page3" data-role="button">先に進む</a> </p> <script> have_map = 1; </script> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> <div id="page3" data-role="page"> <div data-role="header" > <h1>分かれ道</h1> </div><!-- /header --> <div data-role="content" align="center"> <p> 分かれ道です<br> </p> <p> <script> //alert(have_map); if( have_map === 1 ){ have_map_text_A = "宿屋に入る"; have_map_text_B = "お店に入る"; }else{ have_map_text_A = "右に進む"; have_map_text_B = "左に進む"; } document.write("<a href='#page4' data-role='button'>"+have_map_text_A+"</a>"); document.write("<a href='#page5' data-role='button'>"+have_map_text_B+"</a>"); </script> </p> </div><!-- /content --> <div data-role="footer"> <h4>sample</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>

みんなの回答

  • rtgp
  • ベストアンサー率100% (4/4)
回答No.2

NO.1です。 > clickイベントで変数を代入しても、ページをロードしたときに、document.writeの内容が決まっているのでしょうか。 仰る通りです。 リンクがクリックされたタイミングで、have_map_text_*の内容に文字列を代入する必要があります。 あくまでJavascriptは読み込まれたタイミングで一旦全て評価されてしまいますので、とあるタイミングでのみ処理を走らせたい場合は、全てイベントリスナーに紐付けないといけません。

mappy6464
質問者

お礼

ありがとうございます。 そうですよね。

  • rtgp
  • ベストアンサー率100% (4/4)
回答No.1

こんにちは <script>の中にhave_mapを書いて代入していますが、これだとページがロードしたときに全て処理が進んでしまいます。 なので、ロードしたタイミングでhave_mapが1になります。 jQuery Mobileのdata-role=pageでページを切り替えているのは、見た目別ページをロードしているように見えますが、実際はひとつのページなので、ロードのタイミングで全部実行されちゃうんですね。 で、押したリンクによって処理を分けるなら、イベントリスナーを使うとかですかね。 例えば、 <a href="#page2" data-role="button">開ける</a> <a href="#page3" data-role="button">開けない</a> ↓ <a href="#page2" data-role="button" class="open">開ける</a> <a href="#page3" data-role="button" class="nonopen">開けない</a> <script> $(".open").click(function(){ have_map = 1; }); </script> みたいな感じでしょうか （実際動かしてないので、これで動かなかったら言ってください。。） （上記はjQueryの書き方です、素のJavascriptだとaddEventListenerというやつを使います）

mappy6464
質問者

お礼

回答をありがとうございます。 早速Clickイベントを追加してみました。 <a href="#page2" data-role="button" onclick='open_box'>開ける</a> <a href="#page3" data-role="button">開けない</a> </p> <script> function open_box(){ have_map = 1; alert(have_map); } </script> ですが、Page3をロード・解釈する時点で、have_mapが０なので、常に左右に進む表示になってしまいます。 clickイベントで変数を代入しても、ページをロードしたときに、document.writeの内容が決まっているのでしょうか。 すみません。本当の基本がわかっていない気がしてきました。。。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • H2にも色を付けたい、デザインを適用させたい

    http://blog.direct-search.jp/2010/10/jquery-mobile.html のサイトを参考にしたのですが、 <h2>test</h2> も　<h1>Header</h1> のように、 色を白にして背景を青にするデザインにするにはどうすればいいでしょうか？ 今は下記のコードのしていますが、 そうすると画像の様に、<h2>test</h2> は太字でtestになってしまいます。 <html> <head> <meta charset="utf-8"> <title>jQuery Mobile テスト</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <section data-role="page" data-theme="b" id="ds-home"> <header data-role="header" data-theme="b"> <h1>Header</h1> </header><!-- /header --> <article data-role="content"> <div>This is a test page.</div> <h2>test</h2> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category</li> <li><a href="#ds-page-1">First Child</a></li> <li><a href="#ds-page-2">Second Child</a></li> </ul> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Category 2</li> <li><a href="#ds-page-3">First Child 2</a></li> <li><a href="#ds-page-4">Second Child 2</a></li> </ul> </article><!-- /content --> <header data-role="footer" data-theme="b"> <h2>Footer</h2> </header><!-- /footer --> </section><!-- /page --> </body> </html>

    • ベストアンサー
    • HTML
  • jquerymobileで作成するアンケートページ

    jQuerymobileでアンケートページを作成しております。アンケートの結果(textbox,checkbox,radioboxなど)をformからcgiに飛ばして最終的にcsvファイルでデータを見る方法を考えております。cgiは「WebHandlerPro」(http://www.tryhp.net/webhandler.htm)の物を使用させていただいております。 ソースは [page1] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Mobile</title> <meta name="viewport" content="width=device-width, initital-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn = false; $.mobile.ajaxEnabled = false; }); </script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> css省略 <body> <div data-role="page" id="page1" data-add-back-btn="true" data-back-btn-text="戻る" data-title="page1"> <div data-role="header" data-position="fixed"> <a href="#home" data-icon="home" data-iconpos ="notext" class="ui-btn-right"></a> <h1>page1</h1> <h3>アンケート</h3> </div> <!-- header --> <div data-role="content"> <h3>以下の設問に～</3> <h4>～～</h4> <p>以下の設問項目の～</p> <form method="post" action="～.cgi" name="myform"> <div data-role="fieldcontain" class="radio"> <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> <legend>aaa</legend> <input type="radio" name="s1" value="1" id="s1-1"> <label for="s1-1">1</label> <input type="radio" name="s1" value="2" id="s1-2"> <label for="s1-2">2</label> <input type="radio" name="s1" value="3" id="s1-3" checked="checked"> <label for="s1-3">3</label> <input type="radio" name="s1" value="4" id="s1-4"> <label for="s1-4">4</label> <input type="radio" name="s1" value="5" id="s1-5"> <label for="s1-5">5</label> </fieldset> </div>　<!-- radio --> <div data-role="fieldcontain" data-theme="b"> <label for="impression">aaa</label> <select name="impression" id="impression" data-native-menu="false" multiple data-theme="b" data-mini="true" data-inline="true"> <option value="1" selected>b</option> <option value="2">c</option> <option value="3">d</option> 　　<option value="4">e</option> <option value="5">f</option> </select> </div> <!-- select --> <div data-role="footer" class="ui-bar" data-position="fixed"> <input type="submit" value="送信"data-icon="arrow-r" data-inline="true" data-iconpos="right"> </div> </form> </div> <!-- menu --> </body> </html> こんな感じのhtmlが何枚もあるようなアンケートです。 jQQuerymobileを使用しないでhtml、cssだけでつくったアンケートはうまく行くので,jQuelymobileでformを使う際におかしな点がありましたらご指摘頂きたいです。 まだ,かなり初心者なのでよくわかっていないところがありますがどなたか詳しい方よろしくお願い致します。

  • Jquery Mobileでのページ表示について

    Jquery Mobile初心者です。 ページ表示についての質問ですが、 ファイルtest.htmlに下記のようにコードを書きました。 ログインのページを通してから、indexのページを表示したいと思っていますが、 ブラウザのアドレスバーに....../test.html#indexと入力すると、 indexのページがそのまま表示されてしまいます。 これではログインページをつける意味がなくなってしまいます。 アドレスバーに....../test.html#indexを入力しても、indexのページが表示されない (ログインページを表示する)ようにするには、どうしたらいいでしょうか？ ご教授をよろしくお願いします。 ------------------------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>テスト</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 　</head> <body> <div id="login" data-role="page"> <header data-role="header" data-position="fixed"> <h1>ログイン</h1> </header> <div data-role="content"> <div data-role="fieldcontain" class="noborder"> <label for="inputLoginId">ログインID:</label> <input type="text" name="inputLoginId" id="inputLoginId" value="" placeholder="ログインIDを入力" /> <label for="inputPwd">パスワード:</label> <input type="password" name="inputPwd" id="inputPwd" value="" placeholder="パスワードを入力" /> </div> <input type="button" id="loginBtn" value="ログイン" data-theme="f" /> </div> </div> <div id="index" data-role="page"> <header data-role="header" data-position="fixed"> <h1>テスト</h1> </header> <div data-role="content"> 　　　 <p>メインページ</p> </div> </div> <div id="TR" data-role="page"> <header data-role="header" data-position="fixed"> <a href="#index" data-icon="back" onclick="backPrc()">戻る</a> <a href="#index" data-icon="home" onclick="homePrc()">ホーム</a> </header> <div data-role="content"> 　　　 <p>サブページ</p> </div> </div> </body> </html> ------------------------------------------------------------

  • javascriptで困っています。教えてください

    jQueryMobileを使って地図を表示したいと思っています。 ４か所にマーカーを表示させ、そのマーカーをクリックするとそれぞれのurlに飛ぶようにしたいのですが、うまくいきません。for文の中のgoogle.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;});のところがおかしいのでしょうか？myMarkerを名前を変えながらgoogle.maps.event.addListenerをしていかないとだめなのでしょうか？教えてください。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Google マップの表示</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <style type="text/css"> <!-- #map_canvas { width:100%; height:400px; } --> </style> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> $(function() { var data = new Array();//マーカー位置の緯度経度 data.push({position: new google.maps.LatLng(35.681382, 139.766084), content: '東京駅', url:'http://www.jreast.co.jp/estation/stations/1039.html'}); data.push({position: new google.maps.LatLng(34.809445,135.532408), content: '太陽の塔', url:'http://park.expo70.or.jp/'}); data.push({position: new google.maps.LatLng(43.062584,141.353627), content: '時計台', url:'http://www15.ocn.ne.jp/~tokeidai/'}); data.push({position: new google.maps.LatLng(26.694183,127.877963), content: '美ら海水族館', url:'http://oki-churaumi.jp/'}); var latlng = new google.maps.LatLng(36.449567,137.636719); var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 　　　for (i = 0; i < data.length; i++) { 　　　var myMarker = new google.maps.Marker({ position: data[i].position, map: map, icon: "km.png" }); google.maps.event.addListener(myMarker,'click',function(event){location.href=data[i].url;}); } $('#map_content').live('pageshow',function(){ google.maps.event.trigger(map, 'resize'); map.setCenter(Latlng); }); }); </script> </head> <body> <div data-role="page" id="map"> <div data-role="header"> <h1>Google マップの表示</h1> </div> <div data-role="content" id="map_content"> <div id="map_canvas"></div> </div> <div data-role="footer"> <h4>&copy; map</h4> </div> </div> </body> </html>

  • androidタブレット、モバイルで手作り辞書

    Androidのスマホとタブレットでつかえる辞書を作りたいのですが、 HTML5+jquerymobileで作れるものでしょうか？ dreamweaverのHTML5＋jquerymobileの開発をセットを試してみたら、 <div data-role="page" id="page"> <div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2l">Page Two</a></li> <li><a href="#page3">Page Three</a></li> <li><a href="#page4">Page Four</a></li> </ul> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> となっています。 この#page2をfunction.htmlに変更し、同じディレクトリにあるfunction.htmlにリンクさせようかと思ったのですが、クリックしたらloading errorと表示されました。 普通は、例えばエクセル関数辞書のように100以上の項目がある場合、100以上のHTMLファイルを多層のディレクトリに作ることで、1ページ辺りの容量を減らすと思うのですが、HTML5+jquerymobileで、一度に読む込む容量を減らすにはどうしたらいいのでしょうか？ それとも、HTML5、jquerymobileは、<div data-role="page" id="page">とが暗喩するように、ひとつのファイルを分割して読み込むのでしょうか？

    • ベストアンサー
    • CSS
  • jquery.mobile　画像を中央に表示

    <!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが 正方形ではない画像が、右上に寄ってしまうのですが これを回避する方法はありますか？ 例で言うのであれば 添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。

    • ベストアンサー
    • HTML
  • jquerymobileのページ遷移のような遷移

    いつもお世話になっております。 jquerymobileのページ遷移のような遷移を行いたいのですが、 イメージ（スライドはしなくても可） URL：http://billboardtop100.net/jquery_mobile/slide/slide.html 流れとしては、ページローディングしている最中、画面がオーバーレイしながら、 ローディングのアニメーション画像を表示し、 ロードが完了したら、スライドしてURL先へリンクする というイメージなのですが（スライドはしなくても可） ajaxとかそういう技術を使わないと、スムーズに遷移しないのでしょうか、、 以下に作ってみたサンプルを記載しますが、 単純にオーバーレイしてからリンク先へアクセスしているので、 読み込みも遅くなりますし、以下のコードだと、ロードの画像が真ん中にきません、、 そして画像を隠す動作が一瞬ちらついてしまいます、、、 html <div id="shade"><img src="/img/ajax-loader.gif" alt="ローディング中"></div> <section data-role="content"> <ul data-role="listview"> <li><a href="/aboutus.html" data-transition="slide">hoge</a></li> <li><a href="sample.html" data-transition="slide">hoge2</a></li> <li><a href="sample.html" data-transition="slide">hoge3</a></li> </ul> </section> js jQuery(function(jQuery){ jQuery("#shade").css({ opacity: '0.6', display: 'none', position: 'absolute', top: '0', width: '100%', height: '100%', background: '#000', zIndex: '1' }); jQuery("a[href]").click(function(e){ link = jQuery(this).attr("href"); if (!link.match(/#/i)) { e.preventDefault(); jQuery("#shade").css('display', 'block'); } }); }); カッコいいページ遷移がしたいです。。 是非ご教授下さい。 どうぞよろしくお願いします

  • 一番上へ移動のマークを表示するにはどうすればいい？

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> </head> <style type="text/css"> .page-top { margin: 0 ; padding: 0 ; } .page-top p { margin: 0 ; padding: 0 ; position: fixed ; right: 16px ; bottom: 16px ; } .move-page-top { display: block ; background: #D36015 ; width: 50px ; height: 50px ; color: #fff ; line-height: 50px ; text-decoration: none ; text-align: center ; -webkit-transition:all 0.3s ; -moz-transition:all 0.3s ; transition:all 0.3s ; } .move-page-top:hover { opacity: 0.85 ; } </style> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://自分のサイト.web.fc2.com/to-top/to-top.js"></script> <div id="page-top" class="page-top"> <p><a id="move-page-top" class="move-page-top">▲</a></p> </div> <div data-role="page"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div role="main" class="ui-content"> <ul data-role="listview"> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> </ul> </div> <div data-role="footer"> </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> これだと一番上へ移動が表示されません。 しかし、 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> </head> <style type="text/css"> .page-top { margin: 0 ; padding: 0 ; } .page-top p { margin: 0 ; padding: 0 ; position: fixed ; right: 16px ; bottom: 16px ; } .move-page-top { display: block ; background: #D36015 ; width: 50px ; height: 50px ; color: #fff ; line-height: 50px ; text-decoration: none ; text-align: center ; -webkit-transition:all 0.3s ; -moz-transition:all 0.3s ; transition:all 0.3s ; } .move-page-top:hover { opacity: 0.85 ; } </style> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://自分のサイト.web.fc2.com/to-top/to-top.js"></script> <div id="page-top" class="page-top"> <p><a id="move-page-top" class="move-page-top">▲</a></p> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> これにすると表示されます。 data-roleとの相性が悪いのでしょうか？ data-roleを使いつつ、一番上へ移動のマークを表示するにはどうすればいいですか？

  • スマートフォン用サイトのアコーディオンメニュー

    スマートフォン用サイトのアコーディオンメニューを作成しています。 http://html-five.jp/140/ こちらのサイト様の情報をもとに2段のメニューが作ろうと思ったのですが、 空白のページが表示されてしまいますが、どこを修正したらよいのかわかりません。 記述したものは下記のとおりです。 解答よろしくお願いいたします。 <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <script type="text/javascript"> $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); </script> <div> <ul> <li> <p><span>LIST 6</span></p> <ul> <li> <p><span>LIST 6-1</span></p> <ul> <li><a href="page01.html">LIST 6-1-1</a></li> <li><a href="page01.html">LIST 6-1-2</a></li> <li><a href="page01.html">LIST 6-1-3</a></li> </ul> </li> <li> <p><span>LIST 6-2</span></p> <ul> <li><a href="page01.html">LIST 6-2-1</a></li> <li><a href="page01.html">LIST 6-2-2</a></li> <li><a href="page01.html">LIST 6-2-3</a></li> </ul> </li> <li> <a href="page01.html">LIST 6-3 (not to open)</a> </li> </ul> </li> <li> <p><span>LIST 7</span></p> <ul> <li> <p><span>LIST 7-1</span></p> <ul> <li><a href="page01.html">LIST 7-1-1</a></li> <li><a href="page01.html">LIST 7-1-2</a></li> <li><a href="page01.html">LIST 7-1-3</a></li> </ul> </li> <li> <p><span>LIST 7-2</span></p> <ul> <li><a href="page01.html">LIST 7-2-1</a></li> <li><a href="page01.html">LIST 7-2-2</a></li> <li><a href="page01.html">LIST 7-2-3</a></li> </ul> </li> <li> <p><span>LIST 7-3</span></p> <ul> <li><a href="page01.html">LIST 7-3-1</a></li> <li><a href="page01.html">LIST 7-3-2</a></li> <li><a href="page01.html">LIST 7-3-3</a></li> </ul> </li> </ul> </li> </ul> </div> </body>

  • jqueryの$.getJSONの処理結果について

    jqueryの$.getJSONの結果およびその違いについて教えてください。 以下の(1)と(2)の処理があり、(2)を(1)と同じ様に 出力したいと考えておりますが、(2)では(1)のように 「class="ui-li-static ui-body-inherit ui-first-child"」などが 設定されずに出力されてしまいます。 そのため、どのように記述すれば(1)と同じ結果になるのかを ご教授いただけますでしょうか。 また、宜しければ(1)と(2)の処理の違いを 教えていただけると助かります。 ※chrome バージョン 43.0.2357.81 　apache-tomcat-7.0.53 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ (1)固定値で埋め込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $('#listviewtest').append('<li>1:aaaaaaa</li>'); $('#listviewtest').append('<li>2:bbbbbbb</li>'); $('#listviewtest').append('<li>3:ccccccc</li>'); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ui> </div> </div> </body> </html> 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li class="ui-li-static ui-body-inherit ui-first-child">1:aaaaaaa</li> <li class="ui-li-static ui-body-inherit">2:bbbbbbb</li> <li class="ui-li-static ui-body-inherit ui-last-child">3:ccccccc</li> </ul> (2)$.getJSONで読み込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $.getJSON( 'test.js', null, function(data, status) { var items = []; $.each(data, function(key, val) { items.push('<li>' + val.id + ':' + val.name + '</li>'); }); $('#listviewtest').append(items.join('')).trigger('create'); } ); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ul> </div> </div> </body> </html> 外部ファイル（test.js） [ {"id":1,"name":"aaaaaaa"}, {"id":2,"name":"bbbbbbb"}, {"id":3,"name":"ccccccc"} ] 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li>1:aaaaaaa</li> <li>2:bbbbbbb</li> <li>3:ccccccc</li> </ul>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する