问题:
类似微博等app,点赞后的点赞按钮是彩色的,未点赞的按钮是黑白色的,本文写的就是实现这种效果
建表:
html代码
<div class="" id="content">
</div>
需要引入js
<script type="text/javascript" src="../script/APICloud-rest-SHA1.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>
dot模板
<script id="articleTemp" type="text/x-dot-template">
{{~it:value:index}}
<div class="c1">
{{= value.abstract}} {{if(value.isLike ){}} 已点赞 {{}else{}}未点赞{{}}}
</div>
{{~}}
</script>
js代码
//当前登录人id
var userId = '5b5fc1324ad8356a180bf13b';
apiready = function() {
query();
};
//查询微博列表函数
function query() {
//查询weibo2表,查询id、概要、创建时间
var client = new Resource("A6054550675047", "29AA8940-236F-7B30-FF84-2EC99D2C1524");
var Model = client.Factory("weibo2");
Model.query({
filter: {
fields: ["id", "abstract", "createdAt"],
order: "createdAt DESC"
}
}, function(ret, err) {
if (err) {
//处理错误 err
alert(JSON.stringify(err));
} else {
//处理数据 ret
alert(JSON.stringify(ret));
queryLike(ret);
}
})
}
//处理点赞回显函数
function queryLike(weiboArray) {
var webiIdArray = [];
for (var i = 0; i < weiboArray.length; i++) {
webiIdArray[i] = weiboArray[i].id;
}
alert(webiIdArray);
var client = new Resource("A6054550675047", "29AA8940-236F-7B30-FF84-2EC99D2C1524");
var Model = client.Factory("weiboLikeDetail");
Model.query({
filter: {
order: "createdAt DESC",
"where": {
"and": [{
"weibo2": {
"inq": webiIdArray
}
}, {
"user": userId
}]
}
}
}, function(ret, err) {
if (err) {
//处理错误 err
alert(JSON.stringify(err));
} else {
//处理数据 ret
alert(JSON.stringify(ret));
for (var i = 0; i < weiboArray.length; i++) {
var weiboId = weiboArray[i].id;
for (var j = 0; j < ret.length; j++) {
var weibo2Id = ret[j].weibo2;
//alert(weiboId+"-"+weibo2Id);
if (weiboId == weibo2Id) {
weiboArray[i]["isLike"] = true;
}
}
}
}
alert(JSON.stringify(weiboArray));
//编译模版
var interation = doT.template($('#articleTemp').html());
//将数据显示到网页中
$('#content').html(interation(weiboArray));
})
}