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 字符串轉(zhuǎn)化為對象         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);     }  });           });

控制器中

// 當圖標變顏色的時候，點擊是取消收藏，當圖片沒顏色的時候點擊是收藏 // 查詢數(shù)據(jù)庫是否存在，如果不存在則加入，存在則刪除，前臺也變樣式 public function collection() { $data = $_POST; $uname1 = session::get('USER_INFO'); $uid = $uname1['uid']; // 應(yīng)該查詢當前用戶對應(yīng)的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']; // 對應(yīng)文章表的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》