2

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

现在我该怎么做？

4

2 回答 2

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');
});
于 2013-06-21T10:30:33.790 回答
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 的回答的事情，您绝对应该改变一件事以像我在这段代码中那样工作。你的parent和color变量都已经是 jQuery 对象了；使用它们时，无需将它们包装在额外的$()调用中。因此，更改这些变量的名称以包含$前缀以提醒它们是 jQuery 对象，然后直接在需要它们的地方使用它们，而不是额外的$()包装器。

如果您self在@Joe 的答案中使用 as ，则代码如下：

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

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

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

于 2013-06-21T10:30:07.417 回答