> PHP 프레임워크 > ThinkPHP > tp5에서 컬렉션 기능을 구현하고 색상을 전환하는 방법

tp5에서 컬렉션 기능을 구현하고 색상을 전환하는 방법

藏色散人
풀어 주다: 2020-04-28 13:59:55
앞으로
2897명이 탐색했습니다.

tp5에서 컬렉션 기능을 구현하고 색상을 전환하는 방법

html 페이지, 참조 부트스트랩 아이콘

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

 $("#collection").click(function(){
$.ajax({
    type:&#39;POST&#39;,
    url:"home_collection.html",
    data:{
        "art_id": {$data[&#39;id&#39;]},        // 传过去文章表的id
    },
    dataType:"json",
    success:function(data){    
        var res = JSON.parse(data);     // json 字符串转化为对象
        if (res.code == &#39;3&#39;)            // 收藏成功,变成红色
        {    
            $(&#39;#collection&#39;).toggleClass(&#39;cs&#39;);         
            // document.getElementById(&#39;collection&#39;).style.background="#FF0000";  // 另一种样式,这是把整个背景都变红了 
            console.log(res.code);
        }
        if (res.code == &#39;4&#39;)           // 取消收藏
        {
            $(&#39;#collection&#39;).toggleClass(&#39;cs&#39;); 
            console.log(res.code);         
        }
    },
    error:function(data){
        console.log(data);
        console.log(data.code);
        alert(222);
    } 
});          
});
로그인 후 복사

controller

// 当图标变颜色的时候,点击是取消收藏,当图片没颜色的时候点击是收藏
// 查询数据库是否存在,如果不存在则加入,存在则删除,前台也变样式
public function collection()
{
$data = $_POST;
$uname1 = session::get(&#39;USER_INFO&#39;);
$uid = $uname1[&#39;uid&#39;];
// 应该查询当前用户对应的art_id 存不存在在 收藏表 中
$result = DB::name(&#39;collection&#39;)->where(&#39;art_id&#39;,$data[&#39;art_id&#39;])->select();
if($result)
{
$aa = DB::name(&#39;collection&#39;)->where(&#39;art_id&#39;,$data[&#39;art_id&#39;])->delete();
$returnData = [&#39;code&#39;=>4, &#39;info&#39;=>&#39;取消收藏&#39;];
}else{
$bb[&#39;art_id&#39;] = $data[&#39;art_id&#39;]; // 对应文章表的id
$bb[&#39;uid&#39;] = $uid ;
$bb = DB::name(&#39;collection&#39;)->insert($bb);
$returnData = [&#39;code&#39;=>3, &#39;info&#39;=>&#39;收藏成功&#39;];
}
// header(&#39;Content-Type:application/json; charset=utf-8&#39;); 
$data3 = json_encode($returnData,JSON_UNESCAPED_UNICODE);    //这样也正确
return $data3;
// return json_encode($returnData);// 这样返回格式正确
}
로그인 후 복사

권장 튜토리얼: "TP5"

위 내용은 tp5에서 컬렉션 기능을 구현하고 색상을 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
tp5
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿