Question

我不确定这是否可行，但我想知道如何将页面ID传递给pageshow函数，如下所示。我怀疑这是错误的方式，但答案已经提到了我。通过此示例传递页面并在 pageshow 中附加网页ID - 获取 #qanda_entry_1 或 #qanda_entry_2 等对应到一个文档中的一系列页面。

更新：DGS下面的代码

页面转换正在进行，但页面没有更新或呈现。我的数据来自全局变量'articles_data'。我看不出click函数中'article'的值如何传递给新页面？警报'警报（文章）;'没有在pageshow上被解雇。

此外 - 这是一个多页文件。

$(document).on("click",".articleLink",function () {
$(this).addClass('clicked_button');  
var page = $(this).attr('data-page');
var article = $(this).attr('data-id');
//alert(article);
$.mobile.changePage(page, {
transition: 'slide',
});
});

$('div[data-role="page"]').on('pageshow',function(){

var page_id = $(this).prop('id');
var article = $('.articleLink.clicked_button').attr('data-id').substr(4);
alert(article);
$('.articleLink.clicked_button').removeClass('clicked_button');

$('#qandahead h1').empty();
$('#qanda_text div').empty();
jQuery.map(articles_data, function(obj) {
   if(obj.id === article){
      $('#qandahead').html('<h1>'+ obj.title + '</h1>');
      $('#qanda_text').html('<h2>'+ obj.title + '</h2>' +
         '<p>' + obj.introtext + '</p>');
   } 

});

});

我的listview链接结构是动态生成的

<li><a class="articleLink ui-link-inherit"  data-page="#qanda_entry_0" data-id="art_18"></li>
<li><a class="articleLink ui-link-inherit"  data-page="#qanda_entry_1" data-id="art_9"></li>

等

Answer 1

使用类似下面的代码。这将为您提供触发pageshow事件的元素的ID

$('div[data-role="page"]').on('pageshow',function(){
    var page_id = $(this).prop('id');
});

将您的代码更改为

$(document).on("click",".articleLink",function () {
    $(this).addClass('clicked_button');  
    var page = $(this).attr('data-page');
    $.mobile.changePage(page);
});

$('div[data-role="page"]').on('pageshow',function(){
    var page_id = $(this).prop('id');
    var article = $('.articleLink.clicked_button').attr('data-id').substr(4);
    $('.articleLink.clicked_button').removeClass('clicked_button');
    $('#qanda_text div').empty();
    $('#qandahead h1').empty();
    jQuery.map(articles_data, function(obj) {
       if(obj.id === article){
          $('#qandahead').html('<h1>'+ obj.title + '</h1>');
          $('#qanda_text').html('<h2>'+ obj.title + '</h2>' +
             '<p>' + obj.introtext + '</p>');
       } 

    });

});

这将概括您的pageshow处理程序，而无需动态设置它。我有点担心你的HTML，因为你已经通过id引用了两个元素，而id应该一次只出现在一个页面上。

如何将变量插入到jqm pageshow函数中

1 个答案: