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>

问题是，即使我单击companyname字段，地址提示也会显示/隐藏。似乎最后一对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对象上创建属性。因此，当您省略hintField = ...时，window.hintField = ...相当于var。这与设置全局变量几乎相同。

所以你拥有它的方式，每次调用pairFieldHint时，它都会覆盖hintField和fieldname的值，这意味着这些值最终都会是上次你调用它时将它们设置为（在你的情况下，这是与“地址”相关的值）。

通过使用var创建局部变量，它们只在函数内适当地限定并且可见，因此再次调用块不会覆盖先前调用函数时的变量。

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

1 个答案: