jquery 实现 收藏 与 取消收藏

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

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

    // 初始化
    $('.icon-collection').toggleOperator('on-collection','off-collection','/user/collect/addpoi/','/user/collect/delpoi/');
    //第一个参数为已经成功收藏的class名称---
--- //第二个参数为已经取消收藏的class名称---
--- //第三个参数为用户点击收藏时,请求的地址; //第四个参数为用户点击取消收藏时,请求的地址;
$.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);
    });

}

你可能感兴趣的:(jquery 实现 收藏 与 取消收藏)