Question

考虑到代码（其中大部分被删除）

// A data set
$.DataArea = function() {

    // Default options
    $.extend(this, {
        'class': "DataSet",
        'bars': new Array(),
        'container': null,
        'containerId': null,
        'gridsize': 20,
        'width': 400,
        'height': 400,
        'currentSelectedBar': 0
    });

    // Add a bar to this object
    this.addBar = function(startDate, endDate, label, styleID) {

        // When the bar is clicked
        $('#' + barID).click(function() {

            alert($(this).currentSelectedBar);
            if (this.currentSelectedBar != undefined)
                $('#' + this.currentSelectedBar).fadeIn("slow");

            this.currentSelectedBar = barID;
                $('#' + barID).fadeTo("slow", 0.5);

        });
    }

当我alert($(this).currentSelectedBar);它总是以未定义的形式出现时，它没有正确设置值。任何想法为什么会这样？

这个想法是当你点击一个条形图时，它会淡出它，当你点击另一个条形图时，最后一条淡出淡出条形也会消失。

Answer 1

回调函数中的this是指引发事件的元素：在这种情况下$('#' + barID)。我想你想要访问你扩展的this。在这种情况下，你应该写这样的东西：

this.addBar = function(startDate, endDate, label, styleID) {
    var self = this

    // When the bar is clicked
    $('#' + barID).click(function() {

        alert($(self).currentSelectedBar);
        if (self.currentSelectedBar != undefined)
            $('#' + self.currentSelectedBar).fadeIn("slow");

        self.currentSelectedBar = barID;
        $(this).fadeTo("slow", 0.5);

    });
}

Answer 2

假设您在addBar的实例上致电DataArea，您的代码应为：

// Add a bar to this object
this.addBar = function(startDate, endDate, label, styleID) {
    var self = this;
    // When the bar is clicked
    $('#' + barID).click(function() {

        alert(self.currentSelectedBar);
        if (self.currentSelectedBar != undefined)
            $('#' + self.currentSelectedBar).fadeIn("slow");

        self.currentSelectedBar = this.id;
        $(this).fadeTo("slow", 0.5);
    });
}

在click处理程序中，this将引用DOM元素'#' + barID。但是属性被分配给一些其他元素而不是DOM元素。

Answer 3

    var that = this;
    $('#' + barID).click(function() {

        alert(that.currentSelectedBar);
        if (that.currentSelectedBar != undefined)
            $('#' + this.currentSelectedBar).fadeIn("slow");

        that.currentSelectedBar = barID;
            $('#' + barID).fadeTo("slow", 0.5);

    });

在点击功能之外缓存this的值。在click函数中，上下文this是被点击的DOM节点。

Answer 4

看起来你遇到了jQuery行为的问题。

$('#' + barID).click(function() {重新映射this的定义，但之前尝试向其添加属性将无效，因为this的定义已被覆盖。

如recmashak所述，您可以将原始this放入变量中，然后在发出警报时使用它

在函数内部引用它

4 个答案: