jQuery Mobile 在新页面上打开单个 json 对象答案

【问题标题】：jQuery Mobile Open individual json object on new pagejQuery Mobile 在新页面上打开单个 json 对象
【发布时间】：2015-12-10 13:10:26
【问题描述】：

我正在开发一个新闻移动应用程序，到目前为止，我已经能够提取 JSON 字符串并显示在我的页面上，但是我不确定如何在新的 jquery 移动页面上打开每个单独的新闻项目。下面是我的代码。

感谢您的帮助。

$.getJSON("http://kyivcool.veedoogroup.com/?json=11", function(data){
    $(data.posts)
  $('#cont').append("<div>");
  $(data.posts).each(function(key, post){
  $('#cont').append( "<div class='img-thumb'><a href='#fullText'><img src='" + post.thumbnail+ "'></a></div>" );
  $('#cont').append( "<div class='title-post'><a href='"+ post.url+ "'><h4>" + post.title + "</h4></a></div>" );
  $('#cont').append( "<div class='author-post'>" + post.author.name + "</div>" );
  $('#cont').append( "<div class='excerpt-post'>" + post.excerpt + "</div>" );
  $('#cont').append( "<hr>" );
alert(data.posts[0].title_plain)});
})

【问题讨论】：

标签： javascript jquery cordova jquery-mobile

【解决方案1】：

您可以将帖子的 json 数组保存到全局 javascript 变量中。然后将帖子 ID 作为数据属性放入链接中。然后处理链接的点击事件，获取帖子id，在全局数组中查找内容。最后将内容放在单独页面的 DIV 中。

var thePosts;
$(document).on("pagecreate","#page1", function(){ 

  $.ajax({ 
      url: 'http://kyivcool.veedoogroup.com/?json=11',
      dataType : 'jsonp',
      success  : function (data) { 
          thePosts = data.posts; //SAVE TO GLOBAL VARIABLE              
          $('#cont').append("<div>");
          $(data.posts).each(function(key, post){
            $('#cont').append( "<div class='img-thumb'><a data-postid='"+ post.id+ "' href='#fullText' class='fullTextLink'><img src='" + post.thumbnail+ "'></a></div>" );
            $('#cont').append( "<div class='title-post'><a href='"+ post.url+ "'><h4>" + post.title + "</h4></a></div>" );
            $('#cont').append( "<div class='author-post'>" + post.author.name + "</div>" );
            $('#cont').append( "<div class='excerpt-post'>" + post.excerpt + "</div>" );
            $('#cont').append( "<hr>" );
          });
      }    
  });

  $(document).on("click", ".fullTextLink", function(){      
    var id = $(this).data("postid");   
    for (var i=0; i<thePosts.length; i++){
        if (thePosts[i].id == id) {
          $("#fullTextDiv").html(thePosts[i].content);
          break;
        }    
    }
  });

});

DEMO

【讨论】：