addEventHandler（）在一個循環中有意想不到的結果

我不確定要尋找什麼，所以我找不到任何關於此主題的任何問題，Google也沒有多大幫助。addEventHandler（）在一個循環中有意想不到的結果

(function() { 
    var element = function(str) { 
     return document.getElementById(str); 
     }, 

     parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'), 
     len = parent.length, 

     slides = slides || []; 

    for (var i=0; i<len; i++) { 
     var link = parent[i].getElementsByTagName('a')[0], 
      slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1)); 


     if (addEventListener) { 
      link.addEventListener('click', function(event){ 
       event.preventDefault(); 
       alert(slide.getAttribute('id')); 
      }); 
     } else if (attachEvent) { 

     } 
    } 

})();

所以，在上面的代碼，內部的for循環，我附上一個事件，所有這些都應該提醒他們指着幻燈片的ID（只用於調試目的的鏈接（其中5個）），但是它們都顯示最後一張幻燈片的ID。我還創建了一個jsFiddle供您在...中看到它。

我假設我搞亂了一些相對簡單的東西，我只是無法弄清楚什麼。

來源

2011-06-11 omninonsense

呃，幻燈片[]是從我以前嘗試解決同一問題的事情中遺留下來的，您可以忽略它。 – omninonsense 2011-06-11 19:03:59

javascript中的變量即使在塊中聲明它們時也是函數範圍。該循環在變量循環周圍創建一個閉包，但是在每次迭代中都會重新分配循環。到循環完成時，所有閉包都指向數組中的最後一個元素。

爲了解決這個問題，範圍變量不同：

(function() { 
    var element = function(str) { 
     return document.getElementById(str); 
     }, 

     parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'), 
     len = parent.length; 

    for (var i=0; i<len; i++) { 
     var link = parent[i].getElementsByTagName('a')[0], 
      slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1)); 


     if (addEventListener) { 
      link.addEventListener('click', (function(slide){ 
       return function(event) { 
        event.preventDefault(); 
        alert(slide.getAttribute('id')) 
       } 
      })(slide)); 
     } else if (attachEvent) { 

     } 
    } 

})();

來源

2011-06-11 19:08:03

我認爲你的代碼有一個錯誤，但是謝謝你的回覆。文字部分幫助了很多！ – omninonsense 2011-06-11 19:21:13

可能是...我沒有看得太緊 – 2011-06-11 19:22:13

在那裏，我編輯了它，但有人顯然必須在它通過之前對它進行檢查。 – omninonsense 2011-06-11 19:24:11

我以前encoutered這個錯誤，它關係到slide，這是很難解釋的結合。這是一個修復。

link.addEventListener('click', 
    (function(x) { 
     return function(event){ 
       event.preventDefault(); 
       alert(x.getAttribute('id')); 
       } 
    })(slide));

來源

2011-06-11 19:13:52

addEventHandler（）在一個循環中有意想不到的結果

回答

相關問題