注意此插件是 依赖于 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);
});
}
网友评论