在函数中引用它

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

假设您在DataArea的实例上调用addBar，那么您的代码应该是：

// 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 2

回调函数中的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 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放入一个变量中，然后在执行警报时使用它