jquery - 函数内的匿名函数会在后续调用中被覆盖吗？

Question

我正在尝试添加一个通用的简单函数，当字段获得/失去焦点时显示/隐藏表单字段的关联提示文本:

        function capFirstLetter(string) {
           return string.charAt(0).toUpperCase() + string.slice(1);
        }

        function pairFieldHint(fieldName) {
           hintField = $('#hint' + capFirstLetter(fieldName));
           fieldName = $('#' + fieldName);
           hintField.toggle();
           fieldName.focus(function () {
              hintField.show('fast');
           });
           fieldName.blur(function() {
              hintField.hide('fast');
           });
        }

        pairFieldHint('companyname');
        pairFieldHint('address');

我想我可以编写一次并根据特定的命名约定将其用于任何类似的字段/提示对:

<label class="required">Company Name</label><input type="text" name="companyname" id="companyname" />
<div class="field-hint" id="hintCompanyname">Invoice to this name</div>

<label class="required">Address</label><input type="text" name="address"  id="address" />
<div class="field-hint" id="hintAddress">Eg. New York, 6th ave 4.</div>

问题是，即使我单击公司名称字段，地址提示也会显示/隐藏。看来最后的pairFieldHint 调用会覆盖之前的任何调用。

查看实际操作:http://jsfiddle.net/Kh62D/

也许里面的匿名函数总是被覆盖？应该有什么问题吗？

Answer 1

您需要使用var在您的函数中设置局部作用域变量(请参阅 http://jsfiddle.net/Kh62D/2/ ):

function pairFieldHint(fieldName) {
    var hintField = $('#hint' + capFirstLetter(fieldName));
    var fieldName = $('#' + fieldName);
    /* ...the rest of your code as before... */
}

当您省略 var 时，它实际上是在 window 对象上创建一个属性。因此，当您省略 var 时，hintField = ... 相当于 window.hintField = ...。这实际上与设置全局变量相同。

因此，按照您的方式，每次调用 pairFieldHint 时，它都会覆盖 hintField 和 fieldname 的值，这意味着这些值最终都会是您上次调用它时设置的值(在您的情况下，这是与“地址”关联的值)。

通过使用 var 将它们设为局部变量，它们的作用域会适当，并且仅在函数内可见，因此再次调用该 block 不会覆盖之前调用该函数时的变量。