Question

我正在尝试创建一个简单的JQM / phonegap应用程序，该应用程序显示来自mySQL的新闻文章列表，然后将参数传递到下一页以显示完整的新闻文章。

我使用的是多页模板，似乎无法正确传递值。

<!DOCTYPE html> 
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>News</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script>

     $.getJSON('getnews.php', function(data) {                                                               
         if( data ) { 
          $('ul#articleList').empty();
          $.each(data, function(key, val){ 
              $('ul#articleList').append('<li><a href="#two" data-parm="'+ val.id +'" id="news-param">'+ val.title +'</a></li>');                             
            });
            $('ul#articleList').listview('refresh');

            } else {
                 $('ul#articleList').html('<li><a href="">No news articles</a></li>');
            }



        });


    </script>
</head> 


<body> 

<!-- Start of news list: #news-list -->
<div data-role="page" id="news-list">

    <div data-role="header">
        <h1>News</h1>
    </div><!-- /header -->

    <div data-role="content" >  
          <script>

         $('#news-param').live('click',function(){
            var parm = $('this').data('parm');
            alert (parm);
             $("#showparam").html(parm);
        });

        </script>

        <ul id="articleList" class="icon-list"></ul>
    </div><!-- /content -->

    <div data-role="footer" data-theme="b">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /news list -->


<!-- Start of news article page: #two -->
<div data-role="page" id="two" data-theme="b">

    <div data-role="header">
        <h1>Two</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="b">    
        <h2>News Article</h2>
        <div id="showparam"></div>

        <p><a href="#news-list" data-direction="reverse" data-role="button" data-theme="b">Back to news listing</a></p> 

    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /news article page -->


</body>
</html>

Answer 1

你的代码中只有一个拼写错误：

$('this').data('parm');

应该是

$(this).data('parm'); //no quotes around this

这是一个有效的 DEMO

将参数传递到多页模板中的下一页

1 个答案: