Heim > PHP-Framework > Denken Sie an PHP > So implementieren Sie die Sammlungsfunktion und wechseln die Farben in tp5

So implementieren Sie die Sammlungsfunktion und wechseln die Farben in tp5

藏色散人
Freigeben: 2020-04-28 13:59:55
nach vorne
2897 Leute haben es durchsucht

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}
Nach dem Login kopieren

CSS-Stil

<style>
.like{ font-size:66px;  color:#ccc; cursor:pointer;}
.cs{color:#FF0000;}
</style>
Nach dem Login kopieren

js

 $("#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);
    } 
});          
});
Nach dem Login kopieren

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

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!

Verwandte Etiketten:
tp5
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage