在函数内部引用 this

发布于 2024-11-16 18:24:22 字数 961 浏览 0 评论 0原文

给定代码（其中大部分被删除），

// 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); 时，它总是显示为未定义，它没有正确设置值。有什么想法可能是为什么吗？

这个想法是，当您单击一个栏时，它会淡出，当您单击另一个栏时，最后一个淡出的栏也会淡入。

原文

Given the code (a lot of it stripped out)

// 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);

        });
    }

When I alert($(this).currentSelectedBar); it always comes out as undefined, it's not setting the value properly. Any ideas why this might be?

The idea is when you click on a bar, it fades it out, and when you click another the last bar to fade out fades in as well.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

戴着白色围巾的女孩 2024-11-23 18:24:22

假设您在 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 元素。

Assuming you are calling addBar on an instance of DataArea, your code should be:

// 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);
    });
}

Inside the click handler, this will refer to the DOM element '#' + barID. But the properties are assigned to some other element and not that DOM element.

回复收藏 0 原文

少女七分熟 2024-11-23 18:24:22

回调函数中的 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);

    });
}

The this in your callback function refers to the element that rises the event : in that case $('#' + barID).
I guess you want to access the this that you extended. In that case, you should write something like that :

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);

    });
}

回复收藏 0 原文

赤濁 2024-11-23 18:24:22

    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 节点。

    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);

    });

Cache the value of this outside the click function. inside the click function, the context this is the DOM node that was clicked.

回复收藏 0 原文