從匿名函數訪問外部變量

-3

我之前問過這個問題，鏈接到This Thread，這對我來說並沒有什麼幫助。從匿名函數訪問外部變量

我有一個類的實例列表，這些類存儲對DOM元素的引用，一個方法和一個INT。

我需要通過這些類實例中的每一個，並將方法分配給元素的單擊事件。

for(var i = 0, l=children.length; i<l; i++) { 
     var child = children[i]; 
     if(child.nodeType === 1 && child.tagName === "LI") { 
     listItems[x] = new subMenu(child); 
     child.addEventListener('click', function(x) { 
      listItems[x].toggle(); <!------- x is always 7, it should be 0-6 
     }, false); 
     x++; 
     } 
    }

下面是類：

class subMenu { 
     constructor(obj) { 
     this.elm = obj; 
     this.state = 0; 
     } 

     toggle() { 
     if (this.state === 0) { 
      addClass(this.elm, 'toggled'); 
      this.state = 1; 
     } else { 
      removeClass(this.elm, 'toggled'); 
      this.state = 0; 
     } 
     } 
    }

這裏是listItems的圖像：

編輯： 如果我做出改變我認爲是從正確我得到這個：

var menuParent = document.getElementById('megamenu'); 
    var children = menuParent.childNodes; 
    var x = 0; 
    for(var i = 0, l=children.length; i<l; i++) { 
     var child = children[i]; 
     if(child.nodeType === 1 && child.tagName === "LI") { 
     listItems[x] = new subMenu(child); 
     child.addEventListener('click', bindToggle(x), false); 
     x++; 
     } 
    } 
    function bindToggle(i) { 
     return listItems[i].toggle(); 
    } 
    }, false);

但是，toggle()方法只是在賦值時運行一次，然後在單擊元素時不再運行。

編輯2 對不起，我確實做到了第一次正確，只是得到了錯誤的代碼上面。所以我修改了我的代碼以返回一個函數給EventHandler。

var menuParent = document.getElementById('megamenu'); 
    var children = menuParent.childNodes; 
    var x = 0; 
    for(var i = 0, l=children.length; i<l; i++) { 
     var child = children[i]; 
     if(child.nodeType === 1 && child.tagName === "LI") { 
     listItems[x] = new subMenu(child); 
     child.addEventListener('click', bindToggle(x), false); 
     x++; 
     } 
    } 
    function bindToggle(x) { 
     return function() { console.log("Value: " + x); }; // listItems[x].toggle(); 
    }

然而console.log被簡單地輸出

值：2

如果我添加一個console.log(x)的EventHandler`上面的行然後顯示0-6喜歡它應該，所以傳遞給函數的值不應該成爲問題。

來源

2017-04-04 Martyn Ball

_「得到了連接到一個線程，其並沒有真正幫助我都沒有。」 _也許提到哪一個，爲什麼它沒有幫助，所以它不會再發生。 –

對不起，我被鏈接到這個線程，但我不能將那裏顯示的代碼與我的個人問題關聯起來：http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example –

它剛剛被標記爲昆汀重複，這顯然不是幫助我和即時通訊努力將其應用於我的代碼... –

這是從引用的問題接受的答案代碼：

function createfunc(i) { 
    return function() { console.log("My value: " + i); }; 
}

它返回的功能。（返回值傳遞給addEventListener）。

這是您的等效代碼：

function bindToggle(i) { 
    return listItems[i].toggle(); 
}

它只是做的東西再沒有返回值（undefined）。

然後，代碼：

child.addEventListener('click', bindToggle(x), false);

試圖綁定undefined作爲事件處理程序。

你必須給一個函數傳遞給addEventListener

來源

2017-04-04 12:42:54 Quentin

請參閱更新後的帖子。 –

從匿名函數訪問外部變量

回答

相關問題