0

最初のページにリストがある複数ページのjquerymobileWebサイトがあります。リストの各要素は、押されたリスト要素に応じてコンテンツが異なる2番目のページを指します。具体的には、最初のページに「場所」のリストがあり、2番目のページに特定の場所の詳細があります。

<ul id="location_list" data-role="listview">
    <li><a href="#location_page" data-id="1231">Location 1</a></li>
    <li><a href="#location_page" data-id="4056>Location 2</a></li>
    <li><a href="#location_page" data-id="7569">Location 3</a></li>
</ul>

ここで、data-id属性はロケーションIDです。パラメンターを渡すために、リスト要素にjQuery関数を追加しました。この関数は、押された要素のdata-id値を見つけて、次のページを呼び出す前にウィンドウ変数の変数に格納します。

$('#location_list').find("a").live("click",function(event){
    window.location_id = $(this).data("id");
});

2ページ目は、window.location_idの値を読み取り、適切なコンテンツを表示します。

2ページ目を更新するまで、すべて正常に機能します。そうすると、パラメータを渡すために使用した変数は（正しく）空になり、コンテンツはロードされません。ページのURLに値を渡して（リストをhref = "＃location_page？locid = 1231"でリンク）、document.location値を解析しようとしましたが、ページ間の反復では機能しません（ 2番目のページのURLには、「＃location_page？locid = 1231」ではなく、「＃location_page」だけがあります）

誰かが私の問題を解決するのを手伝ってもらえますか？たぶん、ページ間でパラメンターを渡すためのより良い方法、または通過後のパラメンターを機能させる方法があります。

ご協力いただきありがとうございます。

4

1 に答える 1

0

パラメータを渡すためのより良い方法があります。

jQuery.data()データをDOMにアタッチすることで機能します（id:で行ったように<a ... data-id=""></a>）。jQuery Mobileは更新されず、ページ切り替えにAJAXを使用するため、そのデータはモバイルアプリケーション/ウェブサイト全体で利用できますが、ページが更新されると、DOMが再読み込みされ、以前に添付されたデータについては何も認識されません。

あなたがすべきだと私が信じていることは次のとおりです。locations.htmlリスト用のlocation-details.htmlページと特定の場所の詳細用のページを作成します。次に、URLを介してデータを簡単に渡すことができます。

例：

<!-- locations.html -->
...
<ul id="locations_list" data-role="listview">
    <li>
        <a href="location-details.html?id=1">Location 1</a>
    </li>
    <li>
        <a href="location-details.html?id=2">Location 2</a>
    </li>
    <li>
        <a href="location-details.html?id=3">Location 3</a>
    </li>
    <li>
        <a href="location-details.html?id=4">Location 4</a>
    </li>
    <li>
        <a href="location-details.html?id=5">Location 5</a>
    </li>
</ul>
...

<!-- location-details.html -->
...
<script type="text/javascript">
    $(document).on('pageinit', function () {
        function setupLocationDetails () {
            var location_id = $.mobile.path.parseUrl($(location).attr('href')).search.replace('?id=', '');

            // Do whatever you need to do here.
        }

        setupLocationDetails();
    });
</script>
...
于 2012-08-20T08:36:09.427 に答える