前端--收藏功能的實現

收藏按鈕：

<span class="mui-icon mui-icon-star  mui-pull-right"></span>

js邏輯代碼：

//一進入頁面查詢一下當前項目收藏、非收藏狀態，點擊后進行收藏、取消收藏                    
$.ajax({
            url: "../star/selectStarStateByProjectId.do", 
            type: "post",
            data: {
                USER_ID :Userid,//用戶id
                projectId:project_id//項目ID
            },
            success: function (data) {
                if (data.ret == 1) {
                    //mui.toast("您已收藏");//當前項目的當前狀態
                    $(".mui-icon-star").css({"color":"#007aff"});//已收藏項目為藍色
                    //已收藏，點擊后就是取消收藏
                    var i = 0;//默認值為0
                    //點擊后判斷是執行收藏還是取消收藏
                    $(".mui-icon-star").on("click", function (e) {
                        var k = 0;
                        i++;
                        //如果當前是非收藏狀態，點擊后就執行收藏操作
                        if (i % 2 == 0) {
                                $.ajax({
                        url: "../star/addStar.do",
                        type: "post",
                        data: {
                            USER_ID:Userid,//用戶id
                            projectId:project_id//項目ID
                        },
                        success: function (data) {
                            if (data.ret == 1) {
                                mui.toast(data.data);
                                //取消收藏成功，圖標變為原樣    
                                $(".mui-icon-star").css({"color":"#007aff"});
                            
                            }
                            else if (data.ret == 0) {
                                mui.toast("添加收藏失敗！");
                            }
                        },
                        error: function () {
                            mui.toast("添加收藏成功！");
                        }
                    })
                //如果當前是收藏狀態，點擊后就執行取消收藏操作
                        } else {
                        
                    $.ajax({
                        url: "../star/unStar.do",
                        type: "post",
                        data: {
                            USER_ID:Userid,//用戶id
                            projectId:project_id//項目ID
                        },
                        success: function (data) {
                            if (data.ret == 1) {
                                mui.toast(data.data);
                                //取消收藏成功，圖標變為原樣    
                                $(".mui-icon-star").css({"color":"black"});
                            
                            }
                            else if (data.ret == 0) {
                                mui.toast("取消收藏失敗！");
                            }
                        },
                        error: function () {
                            mui.toast("取消收藏失敗！");
                        }
                    })
                        }
                    })
                }
                else if (data.ret == 0) {
                    mui.toast("您未收藏！");//當前狀態為未收藏
        
                    var i = 0;
                    //點擊按鈕后，判斷是執行添加收藏還是取消收藏
                    $(".mui-icon-star").on("click", function (e) {
                        var k = 0;
                        i++;
                        if (i % 2 == 0) {
                                
                            $.ajax({
                        url: "../star/unStar.do", //取消收藏
                        type: "post",
                        data: {
                            USER_ID:Userid,//用戶id
                            projectId:project_id//項目ID
                        },
                        success: function (data) {
                            if (data.ret == 1) {
                                mui.toast(data.data);
                                //取消收藏成功，圖標變為原樣    
                                $(".mui-icon-star").css({"color":"black"});
                            
                            }
                            else if (data.ret == 0) {
                                mui.toast("取消收藏失敗！");
                            }
                        },
                        error: function () {
                            mui.toast("取消收藏失敗！");
                        }
                    })
                        } else {
                    //未收藏狀態下，點擊后執行收藏操作
                            $.ajax({
                        url: "../star/addStar.do",
                        type: "post",
                        data: {
                            USER_ID:Userid,//用戶id
                            projectId:project_id//項目ID
                        },
                        success: function (data) {
                            if (data.ret == 1) {
                                mui.toast(data.data);
                                //添加收藏成功，圖標變為藍色
                                $(".mui-icon-star").css({"color":"#007aff"});
                            }
                            else if (data.ret == 0) {
                                mui.toast("添加收藏失敗！");
                            }
                        },
                        error: function () {
                            mui.toast("添加收藏失敗！");
                        }
                    })
                        }
                    })
                }
            },
            error: function () {
                mui.toast("查詢失敗！");
            }
        })