各位大大好~
小弟研究了半天找到了不会出错的写法
但是 会出错的写法我怎么想都想不通它是如何产生那样的错误结果
想来请教各位
以下是我完整的测试网页
======================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>Test</title>
<style type="text/css">
.myBtn {width: 150px; padding: 4px; margin: 4px;}
</style>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// 按钮templete
var tpl_btn = '<button class="myBtn"></button>';
// 文句库
var txtLibrary = {
'0001': 'Allen',
'0002': 'Bob',
'0003': 'C'
};
// 页面ready初始化
$(document).ready(function() {
setWindow([
{tid: '0001', func: A_FUNC},
{tid: '0002', func: B_FUNC},
{tid: '0003', func: C_FUNC}
]);
});
// 产生画面
function setWindow(infoArray) {
var buttons = [];
// 不会出错
$(infoArray).each(function(i, info) {
var _label = txtLibrary[info.tid],
_func = function(e) {
info.func(true, _label);
};
buttons.push({label: _label, func: _func});
});
// 会出错
/*
for (var i in infoArray) {
var info = infoArray[i],
_label = txtLibrary[info.tid],
_func = function(e) {
info.func(true, _label);
};
buttons.push({label: _label, func: _func});
}
*/
setButtons(buttons);
}
// 产生按钮
function setButtons(buttons) {
var $btnArea = $('#btnArea');
for (var i = 0; i < buttons.length; i++) {
var btn = buttons[i];
$btnArea.append($(tpl_btn)
.html(btn.label).on('click', btn.func)
);
}
}
function A_FUNC(isDebug, name) {
alert(name + ' run A ' + (isDebug ? 'DEBUG' : 'FUNCTION'));
}
function B_FUNC(isDebug, name) {
alert(name + ' run B ' + (isDebug ? 'DEBUG' : 'FUNCTION'));
}
function C_FUNC(isDebug, name) {
alert(name + ' run C ' + (isDebug ? 'DEBUG' : 'FUNCTION'));
}
</script>
</head>
<body>
<div id="btnArea"></div>
</body>
</html>
======================
正常得到的结果是
按 Allen 这个 button 显示 "Allen run A DEBUG"
按 Bob 这个 button 显示 "Bob run B DEBUG"
按 C 这个 button 显示 "C run C DEBUG"
而错误的那个写法会得到
按 Allen 这个 button 显示 "C run C DEBUG"
按 Bob 这个 button 显示 "C run C DEBUG"
按 C 这个 button 显示 "C run C DEBUG"
是如何错的呢？
感谢~~~