最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-03 13:37:46
文档

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

tp5实现收藏功能并且可切换颜色的方法:html页面中,引用了bootstrap 的图标 {if condition="$color == 5"} <div > <!-- <i id="collection" class="icon-heart cs"></i><br />
推荐度:
导读tp5实现收藏功能并且可切换颜色的方法:html页面中,引用了bootstrap 的图标 {if condition="$color == 5"} <div > <!-- <i id="collection" class="icon-heart cs"></i><br />


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实现收藏功能并且可切换颜色的方法

tp5实现收藏功能并且可切换颜色的方法:html页面中,引用了bootstrap 的图标 {if condition="$color == 5"} <div > <!-- <i id="collection" class="icon-heart cs"></i><br />
推荐度:
标签: 收藏 切换 颜色
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top