博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端--收藏功能的实现
阅读量:4968 次
发布时间:2019-06-12

本文共 5278 字,大约阅读时间需要 17 分钟。

收藏按钮:
View Code
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("查询失败!");            }        })

 

转载于:https://www.cnblogs.com/heyiming/p/11289685.html

你可能感兴趣的文章
【知识点】Filter、Servlet、Listener区别与联系
查看>>
keyboard scan code 表
查看>>
How to Build Aggregate/Composite Components in Delphi
查看>>
NT系统下木马进程的隐藏与检测
查看>>
Delphi中文本文件Utf-8和Ansi转换
查看>>
mycat 1.6.6.1 distinct报错问题
查看>>
关于Oracle伪列rownum
查看>>
html知识点
查看>>
交互式报告系统 Dr. Tom | 华大基因培训资料
查看>>
sql日期函数
查看>>
sdk下载地址
查看>>
redis 日志等级说明
查看>>
request.GetResponse 400错误处理方法
查看>>
poj 3083 Children of the Candy Corn (dfs+bfs)
查看>>
模块 DLL C:\Windows\system32\inetsrv\aspnetcore.dll 未能加载。返回的数据为错误信息。(IIS7应用程序池自动关闭)...
查看>>
gd库
查看>>
EasyUI TreeGrid
查看>>
jbpm designer 变量
查看>>
IEnumerable IList List区别
查看>>
20155309 《java程序设计》实验四Android程序设计
查看>>