Question

我想在我的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。

现在我该怎么做？

Answer 1

通过将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');
});

Answer 2

我个人可能会这样做。这是一种不同的方法;您不需要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的回答，你应该有一件事可以改变，就像我在这段代码中一样。您的parent和color变量都是jQuery对象;使用它们时，无需将它们包含在其他$()调用中。因此，更改这些变量的名称以包含$前缀作为提示，它们是jQuery对象，然后直接在需要它们的地方使用它们而不是额外的$()包装器。

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

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

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

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

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

2 个答案: