0

我希望创建一个 Web 应用程序,这意味着 HTML 元素必须非常动态,因为它们将被创建和移动,并由不同的其他元素处理。因此,我决定使用类 - 取得了很大的成功,直到处理事件为止。这是怀疑 Chrome 告诉我的类,它将它与未定义的变量混淆了。

function SpanInputPair(element) {
    span = document.createElement("span");
    this.Span = getNextInputID();
    span.style.display = "none";
    span.id = this.Span;
    element.appendChild(span);
    input = document.createElement("input");
    input.type = "text";
    this.Input = getNextInputID(); // request a new ID for this element and save into this class
    input.id = this.Input; // Attach it onto the element for future finding :/ (slow)
    element.appendChild(input);
    input.focus();
    span.onclick  = function() {
        var input = getInput(this.Input); // this.Input cannot be seen?
        var span = getInput(this.Span);
        input.value = span.innerHTML;
        toggleDisplay(input);
        toggleDisplay(span);
        input.focus();
    }
    input.onblur...

行“var input = getInput(this.Input);” 是 Chrome 告诉我它不再看到“this.Input”的问题。我知道这一点,因为我可以运行这一行并将“this.Input”替换为实际值,它会很好地返回元素。如您所见,我让它创建了一个文本框并动态跨越并设置它们的 ID 以供将来使用,这是因为我之前尝试将元素本身保存在类中并在事件中使用它 - 同样的问题,所以我尝试而是使用 document.getElementByID() 在每个事件的文档中找到它。奇怪的是,它似乎并没有关注它刚刚创建的文本框(如果这也可能是问题的一部分,我不知道)。这个项目完全是白手起家,不使用任何库。所以我的问题是,你能解释一下为什么元素' s 事件在创建它的类中看不到任何变量?我该如何解决这个问题?

我还没有看到这个帖子,因为很多人都在使用诸如 JQuery 之类的库和/或不使用类,这个问题是特定于事件处理的,在类的内部变量的帮助下。

4

2 回答 2

2

尽管它可能没有太大意义,但在 JavaScript 中是正常的,因为 this 的值在您声明的本地函数中发生了变化。因此,您必须正确理解如何在 JavaScript 中声明和使用函数:

JavaScript 中的函数有一个叫做context的东西,这意味着每个函数都绑定到一个特定的对象。如果我们在您的脚本中声明一个函数,它将绑定到全局对象(即浏览器中的窗口)。

然而,如果我们试图声明一个方法(一个属于一个对象的函数), this将是一个代表对象本身的魔术变量。每次调用this.my_property时,您都会获得对象属性的值,即“属性”或“方法”。

因此,函数的上下文可以更改,就像事件处理程序一样。在您的场景中,事件处理程序是其上下文已更改的函数,因此每次访问它时,它的值将是当您单击它时接收事件的 HTMLElement 对象。

为了解决这个问题,您可以声明一个辅助变量并在处理程序内部使用它。社区遵循的普遍做法是:

var that = this;   // Also, the people use 'self' instead of 'that'

span.onclick = function() {
   var input = that.input;

   // ...
};

使用此解决方法,您不会有任何问题。

于 2013-06-14T16:02:22.330 回答
1

click 函数中'this' 的值是被点击的元素。这就是<span>你刚刚创建的。

当您定义 click 函数时,您想要返回 this 的值。(问题也可能是:调用函数时“this”的值SpanInputPair是多少?您可能需要考虑这一点。)

您可以通过这样的方式将其添加到闭包中:

var thisInput = this.Input;
...

span.onclick  = function() {
    var input = getInput(thisInput);

您将this.Span在下一行遇到同样的问题。

于 2013-06-14T15:45:40.813 回答