我想在我的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
。
现在我该怎么做?
答案 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的回答,你应该有一件事可以改变,就像我在这段代码中一样。您的parent
和color
变量都是jQuery对象;使用它们时,无需将它们包含在其他$()
调用中。因此,更改这些变量的名称以包含$
前缀作为提示,它们是jQuery对象,然后直接在需要它们的地方使用它们而不是额外的$()
包装器。
如果您在@ Joe的答案中使用self
,那么代码就像:
self.$parent = $("#" + target_id).parent();
self.$color = self.$parent.append(...);
这些名称上的$
前缀不是必需的,但它是指示作为jQuery对象的变量或属性的通用约定。无论您是否需要在其周围使用另一个$()
,它都有助于保持直线。
另外,请注意,您的parent
和color
变量是相同的元素。看起来您期望color
成为<color>
元素,但事实并非如此。我更改了代码,因此它是<color>
元素。