如何设置json feed输出的样式

时间:2017-05-08 11:01:27

标签: javascript jquery json jquery-mobile

我想设置json feed输出的样式。我希望能够按我的意愿安排它。到目前为止,这是我的JavaScript代码。我想实现类似IMG之类的东西,年龄数等信息可能会改变位置等。我希望这可以在jquery mobile上工作,因为我正在构建一个应用程序。

function listPosts(data) {
  var output = '<ul data-role="listview" data-filter="true">';



  $.each(data.posts, function(key, val)
  {


    var tempDiv = document.createElement("tempDiv");
    tempDiv.innerHTML = val.excerpt;
    $("a", tempDiv).remove();
    var excerpt = tempDiv.innerHTML;

    output += '<li>';
    output += '<a href="#blogpost" onclick = "showPost('+ val.id +') ">';
    output += '<h3>' + val.title + "</h3>";
    output += (val.thumbnail) ?
      '<img src="' + val.thumbnail + '" alt="' + val.title + '">':
      '<img src="images/itblogo.png" alt="ITB Logo">';
    output += '<h3>' +  val.custom_fields.gender + "</h3>";
    output += '<h3>' +  val.custom_fields.age + "</h3>";

    output += '</a>';
    output += '</li>';



  }); //go through each post
  output += "</ul>";
  $('#postlist').html(output);
} //listPosts








function showPost(id) {
  $.getJSON('http://www.pawmatch.info?json=get_post&post_id=' + id + '&callback=?', function(data) {
    var
    output ='<img src="'+data.post.thumbnail + '">'
    output += '<h3>' + data.post.custom_fields.dogs_name + '</h3>'
    output +='<h3>'+data.post.custom_fields.dog_size + '</h3>'
    output +='<h3>'+data.post.custom_fields.age + '</h3>'
    output +='<h3>'+data.post.custom_fields.gender + '</h3>'
    output +='<h3>'+data.post.custom_fields.breed + '</h3>'
    output +='<h3>'+data.post.custom_fields.extra_information + '</h3>'
    $('#mypost').html(output);
  });
}

0 个答案:

没有答案