Javascript作用域——var与全局

对于

currentUnknownBox

，如果我使用“var”，预期功能将无法按预期工作（currentUnknownBox将成为单击的第一个元素）。如果我删除var，它将按预期工作。我假设这与全球范围有关。有人能给我解释一下吗

jQuery(".box.unknown").live('click',function()
{
    var currentUnknownBox = this;

    //if we are NOT on mobile, use jQuery UI dialog
    if (!Drupal.settings.is_mobile)
    {
        jQuery("#letter-input-dialog").dialog();

        jQuery('#letter_input_form').submit(function()
        {
            var letter = jQuery("#letter_input").val();
            jQuery("#letter-input-dialog").dialog('close');
            jQuery("#letter_input").val('');
            that.validateAndSaveLetter(currentUnknownBox, letter);
            //Do not let the form actually submit
            return false;
        });
    }
    else
    {
        var letter = prompt('Please enter a letter to use in your guess');
        that.validateAndSaveLetter(that.currentUnknownBox, letter);
    }
});

编辑：

---

问题是我每次都在重新声明提交函数。

您忘记声明变量“that”。 我认为你需要在“如果”声明之前这样做

var that = this;

---

您忘记声明变量“that”。 我认为你需要在“如果”声明之前这样做

var that = this;

---

无论何时使用

var

都是在声明变量的范围。如果省略它，JavaScript将采用最兼容的选项，即全局选项。技术术语为“合同”。更准确地说，JavaScript具有所谓的函数作用域，因此即使您在for循环中声明变量，JavaScript也会将其“提升”到最接近的函数的顶部。

无论何时使用

var

都是在声明变量的作用域。如果省略它，JavaScript将采用最兼容的选项，即全局选项。技术术语为“合同”。更准确地说，JavaScript具有所谓的函数作用域，因此即使您在for循环中声明了一个变量，JavaScript也会将其“提升”到最接近的函数的顶部。

问题是，每次单击其中一个函数时，您都会向表单添加一个新的提交事件处理程序。但是第一个总是先开火。当您不声明var时，您正在覆盖第一个处理程序正在查看的变量。但错误在于每次都添加一个新的处理程序。我想这样做：

var currentUnknownBox;
jQuery('#letter_input_form').submit(function()
    {
        var letter = jQuery("#letter_input").val();
        jQuery("#letter-input-dialog").dialog('close');
        jQuery("#letter_input").val('');
        that.validateAndSaveLetter(currentUnknownBox, letter);
        //Do not let the form actually submit
        return false;
    });
jQuery("#letter-input-dialog").dialog({autoOpen: false});

jQuery(".box.unknown").live('click',function(){
    currentUnknownBox = this;

    //if we are NOT on mobile, use jQuery UI dialog
    if (!Drupal.settings.is_mobile)
     {
       jQuery("#letter-input-dialog").dialog('open');
      } else {
        var letter = prompt('Please enter a letter to use in your guess');
       that.validateAndSaveLetter(currentUnknownBox, letter);
      }   
});

---

顺便提一下，

.live

已被弃用。您应该改为使用。

问题是，每次单击其中一个按钮时，您都在向表单中添加一个新的提交事件处理程序。但是第一个总是先开火。当您不声明var时，您正在覆盖第一个处理程序正在查看的变量。但错误在于每次都添加一个新的处理程序。我想这样做：

var currentUnknownBox;
jQuery('#letter_input_form').submit(function()
    {
        var letter = jQuery("#letter_input").val();
        jQuery("#letter-input-dialog").dialog('close');
        jQuery("#letter_input").val('');
        that.validateAndSaveLetter(currentUnknownBox, letter);
        //Do not let the form actually submit
        return false;
    });
jQuery("#letter-input-dialog").dialog({autoOpen: false});

jQuery(".box.unknown").live('click',function(){
    currentUnknownBox = this;

    //if we are NOT on mobile, use jQuery UI dialog
    if (!Drupal.settings.is_mobile)
     {
       jQuery("#letter-input-dialog").dialog('open');
      } else {
        var letter = prompt('Please enter a letter to use in your guess');
       that.validateAndSaveLetter(currentUnknownBox, letter);
      }   
});

---

顺便提一下，

.live

已被弃用。您应该改为使用。

在哪里定义了

那个
？
currentUnknownBox
看起来不错，但那个
是什么？为什么
that
变量上也有
currentUnknownBox
属性（在else子句中应该有）？与您的问题无关，但在JS中，花括号的位置很重要，可能不应该在它们自己的行上：@ZachL:这仅适用于对象文字。放块括号的地方是个人编码风格，而（尽管我不喜欢）是fine@Bergi是的，但保持一致性很重要，所以即使是一个次要的边缘情况（这不是）也足以成为不使用Allman风格IMO的理由。在哪里定义了
那
？
currentUnknownBox
似乎很好，但那
那是什么呢？为什么
that
变量上也有
currentUnknownBox
属性（在else子句中应该有）？与您的问题无关，但在JS中，花括号的位置很重要，可能不应该在它们自己的行上：@ZachL:这仅适用于对象文字。放块括号的地方是个人编码风格，而（尽管我不喜欢）是fine@Bergi没错，但保持一致性很重要，所以即使是一个次要的边缘情况（这不是）也足以成为不使用Allman风格的理由。在哪里？我看不出你在哪里重新澄清。看。此代码：
jQuery（“#letter_input_form”）.submit（function（）{…
每次运行
.box.unknown
，将新的事件处理程序添加到
#letter_input_form
。是的，真的。无论如何，.live已弃用。在哪里？我看不到你在哪里重新声明。请参阅。此代码：
jQuery（'#letter_input_form'）。提交（function（）{…
在每次单击
.box.unknown
时都会运行，在
\letter\u input\u form
中添加一个新的事件处理程序。是的，真的。无论如何，.live已弃用。