Question

我有一个多页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属性是位置标识符。为了传递参数，我在list元素上添加了一个jQuery函数，它找出了按下的元素data-id值，并在调用下一页之前将它存储在window变量中的变量中。

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

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

一切正常，直到刷新第二页。如果我这样做，我用来传递参数的变量是（正确）为空并且加载了nocontent。我试图传递页面URL中的值（用href =“＃location_page？locid = 1231”链接列表）并解析document.location值，但它不能在页面上工作到页面itaration（如果我打印第二页的网址我只有“#location_page”而不是“#location_page？locid = 1231”）

任何人都可以帮我解决问题吗？也许有更好的方法来传递页面之间的参数或者使传递参数的方法有效。

感谢您的帮助。

Answer 1

有一种传递参数的更好方法。

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>
...

jQuery Mobile：更改页面并刷新

1 个答案: