如何在jQuery函数中使用类方法?

时间:2013-06-21 10:25:01

标签: javascript jquery class function

我想在我的js中制作自动颜色父换色器。

这是我的HTML:

<div id="parent">
    <div id="target" >
        traget
    </div>
</div>

这是我的js:

function ColorBox(target_id, btn) {

    this.parent = $("#" + target_id).parent();

    this.color = $(this.parent).append('<div class="color" >ops</div>');
    $(this.color).append('<button class="change" value="' + btn + '">' + btn + '</button>');

    this.ChangeColor = function (elm_id) {
        $(this.parent).css('background', $(elm_id).val());
        return true;
    }
    // here my problem start
    $("#" + $(this.parent).attr('id') + " .change").bind('click', function () {
        // how I can do it in here.
        ColorBox.ChangeColor($(this));
    });

}

$(document).ready(function () {
    ColorBox('target', 'red');
});

我向目标父级添加了一些元素,我希望在change类上单击ColorBox.ChangeColor执行时,但在绑定方法中我不能使用this.ChangeColor

现在我该怎么做?

2 个答案:

答案 0 :(得分:4)

通过将this分配给变量(例如self),尝试将函数的范围分开。这将避免访问不同范围内的函数变量和函数的任何问题。

这是一个有效的演示:http://jsfiddle.net/37zq5/10/

在这里,您可以看到我所做的代码更改:

function ColorBox(target_id, btn) {

    var self = this;

    self.parent = $("#" + target_id).parent();
    self.color = self.parent.append('<div class="color" >ops</div>');
    self.color.append('<button class="change" value="' + btn + '">' + btn + '</button>');

    $("#" + self.parent[0].id + " .change").on('click', function () {
        self.parent.css('background', this.value);
    });

};

$(document).ready(function () {
    new ColorBox('target', 'red');
    new ColorBox('target2','lime');
});

答案 1 :(得分:1)

我个人可能会这样做。这是一种不同的方法;您不需要this,不需要new,而且代码更少:

function ColorBox(target_id, btn) {
    var $parent = $("#" + target_id).parent();
    var $color = $('<div class="color">ops</div>').appendTo($parent);
    var $button = $('<button class="change" value="' + btn + '">' +
            btn + '</button>').appendTo($color);

    $button.on( 'click', function (event) {
        $parent.css('background', $button.val());
    });
}

$(document).ready(function () {
    ColorBox('target', 'red');
});

无论你采用这种方法还是做一些更像@ Joe的回答,你应该有一件事可以改变,就像我在这段代码中一样。您的parentcolor变量都是jQuery对象;使用它们时,无需将它们包含在其他$()调用中。因此,更改这些变量的名称以包含$前缀作为提示,它们是jQuery对象,然后直接在需要它们的地方使用它们而不是额外的$()包装器。

如果您在@ Joe的答案中使用self,那么代码就像:

self.$parent = $("#" + target_id).parent();
self.$color = self.$parent.append(...);

这些名称上的$前缀不是必需的,但它是指示作为jQuery对象的变量或属性的通用约定。无论您是否需要在其周围使用另一个$(),它都有助于保持直线。

另外,请注意,您的parentcolor变量是相同的元素。看起来您期望color成为<color>元素,但事实并非如此。我更改了代码,因此它是<color>元素。