如何使用 jQuery mobile 检查用户当前正在查看的 div 页面？

Question

我想检查用户设备上当前处于活动状态的 div 页面，即用户当前正在查看的页面，并采取相应措施。我有一些 div，在 div 中我有一些列表条目，它们是可点击的，如果点击了特定的列表条目，则会打开不同的页面。而且我希望能够知道用户当前在哪个 div 中，这意味着我想获取用户设备上当前活动的 div 的 id。您可以在下面找到我的应用中的示例 html。

index.html：

<div id="first" data-role="page">
...
   <li>
      <a href="#second" data-transition="slide">First</a>
   </li>
...
</div>

<div id="second" data-role="page">
...
   <li>
     <a href="#first" data-transition="slide">Second</a>
   </li>
...
</div>

这只是一个小sn-p。所以我想检查用户当前是在 id 为“first”的 div 中，还是在 id 为“second”的 div 中。如何查看当前哪个 div 页面用户正在使用 jQuery 或 JS？

这似乎对我不起作用：

<script>
    $(document).on('mobileinit', function() {
        $(document).on("pagecontainershow", function(event, ui) {
            alert("Current page is: ", $(':mobile-pagecontainer').pagecontainer('getActivePage')[0].id);
        });
    });
</script>
<script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>

Answer 1

我认为你可以这样做：

$(document).on('mobileinit', function(){
    $(document).on( "pagecontainershow", function(event, ui) {
        console.log($(':mobile-pagecontainer').pagecontainer('getActivePage')[0].id);
    });
});

Live Demo

---

jQuery.mobile.activePage：

jQuery.mobile.activePage 自 jQuery Mobile 1.4.0 起已弃用，将在 1.5.0 中删除。

请改用 pagecontainer 小部件中的 getActivePage() 方法。

---

当您使用 jQM 1.3+ 时，您可以尝试以下代码：

$(document).on( "pagechange", function( event, ui ) {
   console.log($.mobile.activePage[0].id);
});

Updated demo for jqM 1.3+

Answer 2

你可以试试这样的：（未经测试）

$(document).bind('pagecontainershow', function(e, data) {

    if ($.mobile.activePage.attr('id') == "first") {
        //do something..
            }
        }
        if ($.mobile.activePage.attr('id') == "second") {
            //do some other thing..
        }

});