html页面中，引用了bootstrap 的图标
{if condition="$color == 5"}
<div >
<!-- <i id="collection" class="icon-heart cs"></i><br /> -->
<!-- <i id="collection" class="icon-heart" class2="cs"></i><br /> -->
<i id="collection" class="icon-heart cs"></i><br />
</div>
{else/}
<div >
<i id="collection" class="icon-heart"></i><br />
</div>
{/if}
CSS 样式
<style>
.like{ font-size:66px; color:#ccc; cursor:pointer;}
.cs{color:#FF0000;}
</style>
js 中
$("#collection").click(function(){
$.ajax({
type:'POST',
url:"home_collection.html",
data:{
"art_id": {$data['id']}, // 传过去文章表的id
},
dataType:"json",
success:function(data){
var res = JSON.parse(data); // json 字符串转化为对象
if (res.code == '3') // 收藏成功，变成红色
{
$('#collection').toggleClass('cs');
// document.getElementById('collection').style.background="#FF0000"; // 另一种样式，这是把整个背景都变红了
console.log(res.code);
}
if (res.code == '4') // 取消收藏
{
$('#collection').toggleClass('cs');
console.log(res.code);
}
},
error:function(data){
console.log(data);
console.log(data.code);
alert(222);
}
});
});
控制器中
// 当图标变颜色的时候，点击是取消收藏，当图片没颜色的时候点击是收藏
// 查询数据库是否存在，如果不存在则加入，存在则删除，前台也变样式
public function collection()
{
$data = $_POST;
$uname1 = session::get('USER_INFO');
$uid = $uname1['uid'];
// 应该查询当前用户对应的art_id 存不存在在 收藏表 中
$result = DB::name('collection')->where('art_id',$data['art_id'])->select();
if($result)
{
$aa = DB::name('collection')->where('art_id',$data['art_id'])->delete();
$returnData = ['code'=>4, 'info'=>'取消收藏'];
}else{
$bb['art_id'] = $data['art_id']; // 对应文章表的id
$bb['uid'] = $uid ;
$bb = DB::name('collection')->insert($bb);
$returnData = ['code'=>3, 'info'=>'收藏成功'];
}
// header('Content-Type:application/json; charset=utf-8');
$data3 = json_encode($returnData,JSON_UNESCAPED_UNICODE); //这样也正确
return $data3;
// return json_encode($returnData);// 这样返回格式正确
}