1. 程式人生 > >tp5 實現收藏功能,可切換顏色

tp5 實現收藏功能,可切換顏色

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);	// 這樣返回格式正確
}