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

我正在尝试创建一个简单的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>

来源

2014-01-14 user3189734

你只是有一个错字在你的代码：

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

应该

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

这里是一个工作DEMO

来源

2014-01-14 18:21:49 ezanker

发现了。这工作和所有运行完美。谢谢。 – user3189734

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

回答

相关问题