tp5实现收藏功能并且可切换颜色的方法

ThinkPHP  /  管理员 发布于 8年前   324

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实现收藏功能并且可切换颜色的方法的详细内容，更多请关注其它相关文章！