Javascript數組變量在循環中丟失

Question

所以我試圖在wordpress上的tinyMCE wysiwyg編輯器中添加其他按鈕。他們正在出現並正在運作（有點）。點擊時，他們只是輸出數組中的最後一個變量，這很奇怪，因爲我在循環中的其他地方使用變量，並且工作正常。

(function() { 
    tinymce.create('tinymce.plugins.col', { 
    init : function(ed, url) { 
     var col_id = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven']; 
     for(var i = 0; i < col_id.length; i++){ 
     var colNum = col_id[i]; 
     ed.addButton(colNum+'_col', { 
      title : colNum+' Column', 
      image : url+'/images/mce/'+colNum+'.png', 
      onclick : function() { 
      ed.selection.setContent('['+colNum+'_col]' + ed.selection.getContent() + '[/'+colNum+'_col]'); 
      } 
     }); // ***** Col ***** 
     ed.addButton(colNum+'_col_first', { 
      title : colNum+' Column First', 
      image : url+'/images/mce/'+colNum+'.png', 
      onclick : function() { 
      ed.selection.setContent('['+colNum+'_col_first]' + ed.selection.getContent() + '[/'+colNum+'_col_first]'); 
      } 
      }); // ****** Col First ****** 
      ed.addButton(colNum+'_col_last', { 
      title : colNum+' Column Last', 
      image : url+'/images/mce/'+colNum+'.png', 
      onclick : function() { 
       ed.selection.setContent('['+colNum+'_col_last]' + ed.selection.getContent() + '[/'+colNum+'_col_last]'); 
      } 
      }); //********* Col Last ********** 
     } 
     }, 
     createControl : function(n, cm) { 
     return null; 
     }, 
    }); 
    tinymce.PluginManager.add('col', tinymce.plugins.col); 
    })(); 

當我點擊一個按鈕是它輸出的[eleven_col]短代碼[/ eleven_col]，這讓我困惑，因爲標題和圖片的網址正確地輸出會發生什麼。

Answer 1

我認爲這是典型的封閉問題，可希望在這裏解釋：JavaScript closure inside loops – simple practical example

裹一切你for環的內部在此：

(function (colNum) { 
    // Your code in the for loop 
})(col_id[i]); 

，並刪除您var colNum = col_id[i];線

所以最終代碼將如下所示：

(function() { 
    tinymce.create('tinymce.plugins.col', { 
     init : function(ed, url) { 
      var col_id = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven']; 
      for(var i = 0; i < col_id.length; i++){ 
       (function (colNum) { // <---------------------- ADDED THIS 
        ed.addButton(colNum+'_col', { 
         title : colNum+' Column', 
         image : url+'/images/mce/'+colNum+'.png', 
         onclick : function() { 
          ed.selection.setContent('['+colNum+'_col]' + ed.selection.getContent() + '[/'+colNum+'_col]'); 

         } 
        }); // ***** Col ***** 

        ed.addButton(colNum+'_col_first', { 
         title : colNum+' Column First', 
         image : url+'/images/mce/'+colNum+'.png', 
         onclick : function() { 
          ed.selection.setContent('['+colNum+'_col_first]' + ed.selection.getContent() + '[/'+colNum+'_col_first]'); 

         } 
        }); // ****** Col First ****** 

        ed.addButton(colNum+'_col_last', { 
         title : colNum+' Column Last', 
         image : url+'/images/mce/'+colNum+'.png', 
         onclick : function() { 
          ed.selection.setContent('['+colNum+'_col_last]' + ed.selection.getContent() + '[/'+colNum+'_col_last]'); 

         } 
        }); //********* Col Last ********** 
       })(col_id[i]); // <------------------------- ADDED THIS 
      } 
     }, 
     createControl : function(n, cm) { 
      return null; 
     } 
    }); 
    tinymce.PluginManager.add('col', tinymce.plugins.col); 
})(); 

Answer 2

@Ian的答案是正確的，但您可能希望以這種方式組織代碼，並在循環中使用命名函數而不是an IIFE。

該函數的參數col_id實際上是不必要的，因爲該函數具有col_id變量的可見性，但我認爲這樣更清晰一些。

(function() { 
    tinymce.create('tinymce.plugins.col', { 
     init: function (ed, url) { 
      function handleColumn(col_id, i) { 
       // loop code in here 
      } 

      var col_id = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven']; 
      for (var i = 0; i < col_id.length; i++) { 
       handleColumn(col_id, i); 
      } 
     }, 
     createControl: function (n, cm) { 
      return null; 
     }, 
    }); 
    tinymce.PluginManager.add('col', tinymce.plugins.col); 
})();