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);// 这样返回格式正确}
推荐教程:《TP5》