Question

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

感谢您的帮助。

＆＃13;

$.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)});
})

＆＃13;

Answer 1

您可以将json数组的帖子保存到全局javascript变量中。然后将post id作为数据属性放在链接中。然后处理链接的click事件，获取post 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

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

1 个答案: