Question

我已经编写了一个Jquery插件，可以更轻松地处理类似于＆＃34;喜欢的＃34;我的应用程序中的功能。插件本身到目前为止工作正常，但现在我遇到了一个问题。

当我调用我的自定义插件函数时，我想基本上切换状态。当类似的成功时，我将类从用户改为用户 - 取消。现在发生的是绑定函数没有更新。链接的文本发生了变化，但是当我点击它时，它仍然执行like（）而不是不同于（）。

$('.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));

Answer 1

您可以使用：

 $(body).on('click', '.user-like', yourFunction);

或者您可以检查点击元素是否存在类：

if ( $(this).hasClass('user-like') ) { /* Do your function */ };

Answer 2

使用其他类作为插件的选择器：

$('.user-action').yourPluginName()

并添加＆＃39; .user-like＆＃39;和＆＃39; .user-different＆＃39;取决于你所处的状态。

然后在你的插件代码中执行以下操作：

  if (this.hasClass('.user-like')) ...

on（）和多个绑定的Jquery问题

2 个答案: