0

これが可能かどうかはわかりませんが、以下のようにページ ID を pageshow 関数に渡す方法を考えています。これは間違った方法だと思いますが、答えは私をほのめかしました。この例では、ページを渡し、pageshowでページ ID を追加します- 1 つのドキュメント内の一連のページに対応する#qanda_entry_1または#qanda_entry_2などを取得します。

更新: DGS の以下のコード

ページ遷移は発生していますが、ページの更新またはレンダリングはありません。私のデータは、グローバル変数「articles_data」から取得されます。クリック関数の「記事」の値を新しいページに渡す方法がわかりません。アラート「アラート(記事);」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>');
   } 

});

});

私のリストビューリンク構造は動的に生成されます

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

等

4

1 に答える 1

0

以下のようなコードを使用します。これにより、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>');
       } 

    });

});

これにより、動的に設定する必要なく、ページ表示ハンドラーが一般化されます。ID で 2 つの要素を参照しており、ID は一度に 1 つのページにしか表示されないため、HTML について少し心配しています。

于 2013-08-26T05:29:48.303 に答える