各位大大好~
小弟研究了半天找到了不會出錯的寫法
但是 會出錯的寫法我怎麼想都想不通它是如何產生那樣的錯誤結果
想來請教各位
以下是我完整的測試網頁
======================
<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"
是如何錯的呢？
感謝~~~