Question

我有以下javascript类（真的不知道它是否是最好的解决方案）而且我不想调用在这个类中定义的函数，而是在同一个类中定义另一个函数。

step1 = {
    init: function(){
        this.events();
    },

    events: function(){
        fct = this; // i stored this in a variable so that i don't lose it
        $(document).on('click', '.form-line li', function(e) {
            e.preventDefault();
            fct.changeCategoryValue($(this));
        });

        $(document).on('click', '.alert-form .confirm', function(e) {
        e.preventDefault();
        $.fancybox.close(true);
        });
    },

    changeCategoryValue: function(el) {
        cat = el.hasClass('has-sub') ? '' : el.data('id');
        title = el.hasClass('has-sub') ? '' : el.data('title');
        $('#cat-title').val(title);
        $("input[name='category']").val(cat);
    }

如你所见，我不想调用changeCategoryValue函数，但如果我用this.changeCategoryValue调用它，它将无效。有关如何改进代码的任何建议？

Answer 1

或者，您可以更改函数回调的范围：

$(document).on('click', '.form-line li', function(e) {
    e.preventDefault();
    this.changeCategoryValue($(e.currentTarget));
}.bind(this));

使用.bind(this)，因此function(e){...}的范围将是step1的实例，而不是$('.form-line li',document)。现在，要仍然定位点击/选中的.form-line li，您可以通过e.currentTarget访问该对象。

Answer 2

尝试使用：

step1.changeCategoryValue($(this));

Answer 3

你已经在课程中添加了属性，为什么不使用类名称来调用它：

step1.changeCategoryValue('any_element_ref');

Answer 4

您可以创建一个合适的对象。如果你不想，这甚至允许你在构造函数中调用init。

function Step() { this.init(); }

Step.prototype.init = function() { this.events(); };

Step.prototype.events = function() {
    var self = this;
    $(document).on('click', '.form-line li', function(e) {
        e.preventDefault();
        self.changeCategoryValue($(this));
    });

    $(document).on('click', '.alert-form .confirm', function(e) {
        e.preventDefault();
        $.fancybox.close(true);
    });
};

Step.prototype.changeCategoryValue = function(el) {
    cat = el.hasClass('has-sub') ? '' : el.data('id');
    title = el.hasClass('has-sub') ? '' : el.data('title');
    $('#cat-title').val(title);
    $("input[name='category']").val(cat);
};

var step1 = new Step();

Answer 5

你可以尝试使用这样的clojure：

step1 = (function(){
            function events(){
                $(document).on('click', '.form-line li', function(e) {
                    e.preventDefault();
                    changeCategoryValue($(this));
                });

                $(document).on('click', '.alert-form .confirm', function(e) {
                    e.preventDefault();
                    $.fancybox.close(true);
                });
            }
            function changeCategoryValue(el) {
                cat = el.hasClass('has-sub') ? '' : el.data('id');
                title = el.hasClass('has-sub') ? '' : el.data('title');
                $('#cat-title').val(title);
                $("input[name='category']").val(cat);
            }
            function init(){
                events();
            }

            return {
                init:init,
                changeCategoryValue: changeCategoryValue
            }
        })()

在javascript类中调用函数

5 个答案: