例如后台返回一个字段collectStatus 当status为ture显示
…/…/image/classinfo/xx.png
例如后台返回一个字段collectStatus 当status为false显示
…/…/image/classinfo/x.png
根据后台的状态前端来显示这个图片就行,
当我们再次点击的时候如果没有收藏的点击就收藏切换成收藏的图片,反之…
前端代码,根据不同的渲染模板来显示有没有被收藏的图片
if(collectStatus=='false'){
<img src="../../image/classinfo/x.png" id='img' alt="" onclick="collecTion(id,collectStatus)">
}else{
<img src="../../image/classinfo/xx.png" id='img' alt="" onclick="collecTion(id,collectStatus)">
}
collectStatus 后台返回的状态 ture 和 false
点击提交的时候需要的字段id 和 status status 1–收藏 2–取消收藏
<script>
var onOff = true;
function collecTion(id,collectStatus) {
var oImg = document.getElementById('img');
var urls1 = getCollection +'&cid=' + cid + '&status=' + 1; //已上传
var urls2 = getCollection + '&cid=' + cid + '&status=' + 2; //未上传
if (collectStatus != 'undefined') {
if (collectStatus == 'false') {
if (onOff) {
onOff = false;
oImg.src = '../../image/classinfo/xx.png';
ajaxGet(urls1, {}, function(ret, err) {
api.toast({
msg: ret.msg,
duration: 3000,
location: 'bottom'
});
})
} else {
onOff = true;
oImg.src = '../../image/classinfo/x.png';
ajaxGet(urls2, {}, function(ret, err) {
api.toast({
msg: ret.msg,
duration: 3000,
location: 'bottom'
});
})
}
} else if (collectStatus == 'true') {
if (onOff) {
onOff = false;
oImg.src = '../../image/classinfo/x.png';
ajaxGet(urls2, {}, function(ret, err) {
api.toast({
msg: ret.msg,
duration: 3000,
location: 'bottom'
});
})
} else {
onOff = true;
oImg.src = '../../image/classinfo/xx.png';
ajaxGet(urls1, {}, function(ret, err) {
api.toast({
msg: ret.msg,
duration: 3000,
location: 'bottom'
});
})
}
}
}
}
</script>