标签：htm div addclass 数据同步 dea function creat lin ast
<!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" } ] } }
标签：htm div addclass 数据同步 dea function creat lin ast
原文地址：http://www.cnblogs.com/shixingwen/p/7078338.html
