這篇文章主要介紹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);// 這樣返回格式正確
}

以上是“tp5如何實現收藏功能并且可切換顏色”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

名稱欄目：tp5如何實現收藏功能并且可切換顏色
URL鏈接：http://m.newbst.com/article26/ppiecg.html

成都網站建設公司_創新互聯，為您提供云服務器、網站設計、網站收錄、全網營銷推廣、響應式網站、ChatGPT

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯