jquery 实现 收藏 与 取消收藏

注意此插件是 依赖于 jquery的,使用前请确保引用了jquery

在使用前需要 提供 状态样式名称 与 状态变化时 所请求的地址。

    // 初始化
    $('.icon-collection').toggleOperator('on-collection','off-collection','/user/collect/addpoi/','/user/collect/delpoi/');
    //第一个参数为已经成功收藏的class名称---<div class="icon-collection on-collection" data-id='idNmuber'></div>---
    //第二个参数为已经取消收藏的class名称---<div class="icon-collection off-collection" data-id='idNmuber'></div>---
    //第三个参数为用户点击收藏时,请求的地址;
    //第四个参数为用户点击取消收藏时,请求的地址;
$.fn.extend({
    toggleCollection (...parameters) {

        $(document).on('touchend',`.${this[0].classList[0]}`,function(){

            let _this = $(this),
                _className = _this.hasClass(parameters[0]),
                _id = _this.data('id'),     //id为要被(收藏/取消收藏)的项目id
                _url = '',
                _oldName,
                _newName;

                if(_className){
                    //如果是已收藏状态,那就执行-取消收藏-逻辑
                    _url = parameters[3] + _id;
                    _oldName = parameters[0];
                    _newName = parameters[1];
                }else{
                    //如果是未收藏状态,那就执行-收藏-逻辑
                    _url = parameters[2] + _id;
                    _oldName = parameters[1];
                    _newName = parameters[0];
                }
                return axios('toggle',_this,_url,_oldName,_newName);
            event.stopPropagation();

        });
    },

    addOperator (...parameters) {
        //只处理收藏
        $(document).on('touchend',`.${this[0].classList[0]}`,function(){
            let _this = $(this),
                _url = _this.data('url'),
                _disName = parameters[0];
            if(_disName === this.classList[1]){
                return false;
            }
            return axios('add',_this,_url,_disName);
        })
        
    },
    delOperator (...parameters) {
        //只处理取消收藏
        $(document).on('touchend',`.${this[0].classList[0]}`,function(){
            let _this = $(this),
                _url = _this.data('url');
            return axios('del',_this,_url);
        })
        
    }

});

let axios = (type,obj,url,isClass,newClass) => {
    //请求处理
    $.ajax(url)
    .done((data) => {
        
        if(data.result){
            //如果对返回的结果中:result的值为1时,表示成功
            switch(type){
                case 'del':
                obj.hide();
                break;
                case 'add':
                obj.addClass(isClass);
                break;
                default:
                obj.removeClass(isClass).addClass(newClass);
            }
            
        }else if(data.code === 10001){
            //如果返回的结果中:code值为10001时,表示用户未登录。执行跳转到 登陆界面
            window.location.href = '/account/login/';
        }
        //提示
        layer.open({
            content: data.msg
            ,skin: 'msg'
            ,time: 2 //2秒后自动关闭
        });
    })
    .catch((data) => {
        console.log(data);
    });

}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,973评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,462评论 25 708
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,970评论 6 342
  • 第一声鸡鸣,天刚破晓,班婕妤便如往常一般执扫帚一个台阶一个台阶的打扫。自搬来长信宫,每日的生活便如此单调简单。从打...
    叁菇凉阅读 314评论 0 1
  • 早加餐:糊塌子午加餐:芋圆 参考目标: 1份肉2份豆制品3份“新鲜”水果4份谷物/薯5份蔬菜,深绿色叶菜最好6杯水...
    静趣_儿童心理师阅读 226评论 0 0