数据同步
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据同步</title> <style type="text/css"> *{ margin: 0; padding: 0; } .content{ width: 80%; min-width: 1200px; margin: 0 auto; } .con-left,.con-right{ vertical-align: top; width: 50%; display: inline-block; } .data li.on{ color: red; } .deal li{ cursor: pointer; } </style> </head> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <body> <div class="content"> <div class="con-left"> <ul class="data"></ul> </div><div class="con-right"> <ul class="deal"></ul> </div> </div> </body> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript"> $.ajax({ url: "list.json", dataType: "json", type: "get", //async: false, success: function(d){ var data = d.data.tweetlist; var dataStr = "", dealStr = ""; for(var item in data){ dataStr += '<li class="on" rel="'+data[item].id+'">'+data[item].content+'</li>'; dealStr += '<li rel="'+data[item].id+'">关闭</li>'; } $(".data").html(dataStr); $(".deal").html(dealStr); }, error: function(d){ console.log(d); } }) $(function(){ $(".deal").on("click","li",function(){ var thisId = $(this).attr("rel"); $(".data li[rel='"+thisId+"']").removeClass("on"); $(this).css("display","none"); }) $(".data").on("click","li",function(){ var thisId = $(this).attr("rel"); $(".deal li[rel='"+thisId+"']").css("display","list-item"); $(this).addClass("on"); }) }) </script> </html>
{ "ecode": 200, "data": { "tweetlist": [ { "id": 418, "content": "毛剑卿强行突破", "userid": 62, "createdate": "2015-07-15 11:29:20", "defaultPhotoid": 534, "nickname": "111", "pic": "img/11.jpg" }, { "id": 419, "content": "马季奇向裁判示意对手拉扯", "userid": 62, "createdate": "2015-07-15 11:29:31", "defaultPhotoid": 536, "nickname": "111", "pic": "img/12.jpg" }, { "id": 417, "content": "马季奇控球", "userid": 62, "createdate": "2015-07-15 11:29:06", "defaultPhotoid": 532, "nickname": "111", "pic": "img/13.jpg" }, { "id": 416, "content": "隆东带球突破", "userid": 62, "createdate": "2015-07-15 11:28:49", "defaultPhotoid": 530, "nickname": "111", "pic": "img/14.jpg" }, { "id": 415, "content": "孔卡带球反击", "userid": 62, "createdate": "2015-07-15 11:28:35", "defaultPhotoid": 528, "nickname": "111", "pic": "img/15.jpg" }, { "id": 414, "content": "海森远射发炮", "userid": 62, "createdate": "2015-07-15 11:28:17", "defaultPhotoid": 526, "nickname": "111", "pic": "img/16.jpg" }, { "id": 413, "content": "海森强势突破", "userid": 62, "createdate": "2015-07-15 11:27:58", "defaultPhotoid": 524, "nickname": "111", "pic": "img/17.jpg" }, { "id": 412, "content": "头球攻门", "userid": 62, "createdate": "2015-07-15 11:27:38", "defaultPhotoid": 522, "nickname": "111", "pic": "img/18.jpg" }, { "id": 411, "content": "前首尔FC球员德扬和河大成", "userid": 62, "createdate": "2015-07-15 11:27:21", "defaultPhotoid": 520, "nickname": "111", "pic": "img/19.jpg" }, { "id": 410, "content": "周挺发球", "userid": 62, "createdate": "2015-07-15 11:26:38", "defaultPhotoid": 518, "nickname": "111", "pic": "img/20.jpg" }, { "id": 409, "content": "黑山伊布-德扬的强力突破", "userid": 62, "createdate": "2015-07-15 11:26:07", "defaultPhotoid": 516, "nickname": "111", "pic": "img/21.jpg" }, { "id": 408, "content": "河大成进球", "userid": 62, "createdate": "2015-07-15 11:25:20", "defaultPhotoid": 514, "nickname": "111", "pic": "img/22.jpg" }, { "id": 407, "content": "斯科拉里指挥梅方", "userid": 62, "createdate": "2015-07-15 11:25:00", "defaultPhotoid": 512, "nickname": "111", "pic": "img/23.jpg" }, { "id": 406, "content": "阿洛伊西奥进球", "userid": 62, "createdate": "2015-07-15 11:24:16", "defaultPhotoid": 510, "nickname": "111", "pic": "img/24.jpg" }, { "id": 405, "content": "塔尔德利", "userid": 62, "createdate": "2015-07-15 11:23:43", "defaultPhotoid": 508, "nickname": "111", "pic": "img/25.jpg" }, { "id": 404, "content": "遭遇夹防", "userid": 62, "createdate": "2015-07-15 11:23:22", "defaultPhotoid": 506, "nickname": "111", "pic": "img/26.jpg" }, { "id": 403, "content": "野牛发威", "userid": 62, "createdate": "2015-07-15 11:22:41", "defaultPhotoid": 504, "nickname": "111", "pic": "img/27.jpg" }, { "id": 402, "content": "王大雷很无奈", "userid": 62, "createdate": "2015-07-15 11:11:48", "defaultPhotoid": 502, "nickname": "111", "pic": "img/28.jpg" }, { "id": 401, "content": "王大雷失球后愤怒踢门", "userid": 62, "createdate": "2015-07-15 11:11:30", "defaultPhotoid": 500, "nickname": "111", "pic": "img/29.jpg" }, { "id": 400, "content": "快马刘彬彬绝杀", "userid": 62, "createdate": "2015-07-15 11:10:47", "defaultPhotoid": 498, "nickname": "111", "pic": "img/30.jpg" }, { "id": 399, "content": "王大雷失误", "userid": 62, "createdate": "2015-07-15 11:10:28", "defaultPhotoid": 496, "nickname": "111", "pic": "img/31.jpg" }, { "id": 395, "content": "不停的追逐", "userid": 62, "createdate": "2015-07-15 11:09:18", "defaultPhotoid": 488, "nickname": "111", "pic": "img/32.jpg" }, { "id": 392, "content": "王永珀进球", "userid": 62, "createdate": "2015-07-15 11:07:58", "defaultPhotoid": 482, "nickname": "111", "pic": "img/33.jpg" }, { "id": 391, "content": "重庆球迷祝恒大亚冠夺冠", "userid": 62, "createdate": "2015-07-15 11:07:43", "defaultPhotoid": 480, "nickname": "111", "pic": "img/34.jpg" }, { "id": 390, "content": "重庆力帆铁杆球迷", "userid": 62, "createdate": "2015-07-15 11:07:04", "defaultPhotoid": 478, "nickname": "111", "pic": "img/35.jpg" }, { "id": 389, "content": "红色海洋", "userid": 62, "createdate": "2015-07-15 11:06:40", "defaultPhotoid": 476, "nickname": "111", "pic": "img/36.jpg" }, { "id": 388, "content": "排山倒海", "userid": 62, "createdate": "2015-07-15 11:06:28", "defaultPhotoid": 474, "nickname": "111", "pic": "img/37.jpg" }, { "id": 387, "content": "郑龙进球", "userid": 62, "createdate": "2015-07-15 10:57:45", "defaultPhotoid": 472, "nickname": "111", "pic": "img/38.jpg" } ] } }