So implementieren Sie die Sammlungsfunktion und wechseln die Farben in tp5

Auf der HTML-Seite wird auf das Bootstrap-Symbol verwiesen

                            {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-Stil

<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);
    } 
});          
});

im Controller

// 当图标变颜色的时候，点击是取消收藏，当图片没颜色的时候点击是收藏
// 查询数据库是否存在，如果不存在则加入，存在则删除，前台也变样式
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);// 这样返回格式正确
}

Empfohlenes Tutorial: „TP5“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Sammlungsfunktion und wechseln die Farben in tp5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!