[問題] 這個傳遞資料錯誤的原理為何?

看板Ajax作者usherII (阿達)時間7年前 (2017/08/22 23:08)推噓1(1推 0噓 12→)

留言13則, 3人參與討論串1/1

各位大大好~ 小弟研究了半天找到了不會出錯的寫法但是會出錯的寫法我怎麼想都想不通它是如何產生那樣的錯誤結果想來請教各位以下是我完整的測試網頁 ====================== <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" 是如何錯的呢？感謝~~~ -- ◢ . ＿＿＿＿＿＿ ◣ ◣ ◢ ◣ ◢ ◢ ◥█◣▲◢█◤ ◣ ◥ ◥ ● │GRAVEYARD. \‧◣ ◥ █◣◢█ ◤ ◢ ◢◤◥█◤◥◣ ◤ ◤ ' \ BILE DEMON│ '◣ ◥◥▌◤◤ ◢ ◢▌ ◣▽◢▌ ◣ ▄ ▄￣￣￣￣￣￣ ◤ ◢ █▌ ◣ ◥ ▎ ◥▌ ◤ ▊ ◢◢ ▌ //＼ ●● ◣◥◥ ◤◥ ◤◤◢ ◥◥ ︵ ◤◤ ◣◣ ◥ ▃▇ ▆◣▂◢▂▅≡█▄ ◣ ＵＳＨＥＲ ◢ Ⅲ◥◢▅◣◤Ⅲ ◤ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.224.50.35 ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1503414498.A.94D.html ※ 編輯: usherII (61.224.50.35), 08/22/2017 23:11:06 ※ 編輯: usherII (61.224.50.35), 08/22/2017 23:16:36