0

我有一个多页 jquerymobile 网站，第一页上有一个列表。列表的每个元素都指向第二页，其内容取决于按下的列表元素。具体来说，我在第一页中有一个“位置”列表，在第二页中有特定位置的详细信息。

<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 属性是位置标识符。为了传递参数，我在列表元素上添加了一个 jQuery 函数，该函数找出按下的元素 data-id 值并将其存储在窗口变量中的一个变量中，然后再调用下一页。

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

第二页将读取 window.location_id 中的值并显示正确的内容。

一切正常，直到我刷新第二页。如果我这样做，我用来传递参数的变量（正确）为空，并且没有加载任何内容。我尝试在页面的 URL 中传递值（使用 href="#location_page?locid=1231" 链接列表）并解析 document.location 值，但它在逐页迭代中不起作用（如果我打印第二页的 URL 我只有“#location_page”而不是“#location_page?locid=1231”）

谁能帮我解决我的问题？也许有更好的方法在页面之间传递参数或使传递参数工作的方法。

谢谢你的帮助。

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 回答