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);// 这样返回格式正确
}

以上是“tp5如何实现收藏功能并且可切换颜色”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

名称栏目：tp5如何实现收藏功能并且可切换颜色
URL链接：https://www.cdcxhl.com/article26/ppiecg.html

成都网站建设公司_创新互联，为您提供云服务器、网站设计、网站收录、全网营销推广、响应式网站、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联