Javascript 关于()和多个绑定的Jquery问题
我已经编写了一个Jquery插件,以便在我的应用程序中更轻松地处理类似Facebook的功能。到目前为止,插件本身运行良好,但现在我遇到了一个问题 当我调用自定义插件函数时,我希望基本上切换状态。当like成功时,我将类从user like更改为user unline。现在发生的是绑定函数没有更新。链接的文本发生了变化,但当我单击它时,它仍然像那样执行,而不是像那样执行Javascript 关于()和多个绑定的Jquery问题,javascript,jquery,bind,Javascript,Jquery,Bind,我已经编写了一个Jquery插件,以便在我的应用程序中更轻松地处理类似Facebook的功能。到目前为止,插件本身运行良好,但现在我遇到了一个问题 当我调用自定义插件函数时,我希望基本上切换状态。当like成功时,我将类从user like更改为user unline。现在发生的是绑定函数没有更新。链接的文本发生了变化,但当我单击它时,它仍然像那样执行,而不是像那样执行 $('.user-like').like({ success: function(data, textStatus,
$('.user-like').like({
success: function(data, textStatus, jqXHR) {
$(this).html('Unlike');
$(this).removeClass('user-like');
$(this).addClass('user-unlike');
}
});
$('.user-unlike').unlike({
success: function(data, textStatus, jqXHR) {
$(this).html('Like');
$(this).removeClass('user-unlike');
$(this).addClass('user-like');
}
});
如何让Jquery知道已更改的类并绑定正确的函数
以下是我的插件代码:
(function ($) {
$.likeApi = function (action, options) {
if (action != 'like' && action != 'unlike') {
return false;
}
var options = jQuery.extend({}, jQuery.likeApi.defaults, options);
return $.ajax({
context: this,
type: "POST",
url: options.baseUrl + action + '.json',
data: {
data: {
Like: {
foreign_key: options.id,
model: options.model
}
}
},
success: options.success,
error: options.error,
dataType: 'json'
});
};
$.fn.like = function (options) {
var scopedOptions = options;
this.on('click', function(event) {
event.preventDefault();
$.likeApi('like', $.extend({}, scopedOptions, {
'id': $(event.target).data('like-fk'),
'model': $(event.target).data('like-model'),
'success': $.proxy(options.success, this)
}));
});
return this;
};
$.fn.unlike = function (options) {
var scopedOptions = options;
this.on('click', function(event) {
event.preventDefault();
$.likeApi('unlike', $.extend({}, scopedOptions, {
'id': $(event.target).data('like-fk'),
'model': $(event.target).data('like-model'),
'success': $.proxy(options.success, this)
}));
});
return this;
};
$.likeApi.defaults = {
parent: null,
baseUrl: '/likes/likes/',
action: null,
model: null,
id: null,
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus);
},
success: function(data, textStatus, jqXHR) {
alert(textStatus);
}
};
}(jQuery));
您可以使用:
$(body).on('click', '.user-like', yourFunction);
或者,您可以检查单击的元素是否存在类:
if ( $(this).hasClass('user-like') ) { /* Do your function */ };
使用其他类作为插件的选择器:
$('.user-action').yourPluginName()
并根据您所处的状态添加“.user like”和“.user nothing”
然后在插件代码中执行以下操作:
if (this.hasClass('.user-like')) ...
我该如何将我的自定义jquery函数传递给它呢?我不想让我的插件依赖于一些外部因素。