javascript - 使用 Javascript 的动态帮助输入字段

Question

我希望发生的是，当用户单击输入字段时，他们会得到一个帮助文本，该文本将出现在 for 顶部，告诉他们要填写什么。目前它卡在一条消息上.

我的 HTML

<p id="help">Helpful notes will appear here</p>

<p>E-mail:  <input type="text" id="email" name="email" />   </p>
<p>Name:    <input type="text" id="name" name="name" />     </p>
<p>Age:     <input type="text" id="age" name="age" />       </p>

我的JS

function showHelp(help) {
    document.getElementById('help').innerHTML = help;
}

function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name',  'help': 'Your full name'},
{'id': 'age',   'help': 'Your age (you must be over 16 to play game)'}
];

for (var i = 0;  i < helpText.length;  i++ ) {
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
    return showHelp(item.help);
  };
}
}
setupHelp();

我非常感谢您的帮助。

这是一个fiddle帮助您查看结果

Answer 1

你已经被关闭错误咬伤了!

这样做:

for (var i = 0;  i < helpText.length;  i++ ) {
    var item = helpText[i];

    (function(item) {
        document.getElementById(item.id).onfocus = function() {
            return showHelp(item.help);
        };
    })(item);
}

问题在于，onfocus 处理程序中的 item 指向 item，如 for 循环内定义的那样。在 for 循环的每次迭代期间，item 的内存位置都会更新为新值，因此最后，每个 onfocus 处理程序都会指向同一个项目。您必须强制使用新的作用域，并且可以通过使用立即调用的函数表达式来做到这一点。这有效地定义了一个新函数并立即调用它，从而创建一个新作用域。因此，对于 for 循环的每次迭代，函数内部都有一个新的 item，这应该使您的 onfocus 处理程序的行为符合您的预期。

查看 fiddle .

如numbers1311407评论中提到，您还可以使用 forEach 代替 for 循环:

helpText.forEach(function (item) {
    document.getElementById(item.id).onfocus = function() {
       return showHelp(item.help);
       //showHelp(item.help);
   };        
});

这与使用 IIFE 的行为方式相同，但看起来不那么尴尬。 forEach 所有浏览器都支持，但 IE 8 及以下版本不支持。