多個addEventListener不存儲唯一回調

超級睏倦和編碼，如果我是一名外科醫生，這不是一個好的組合，如果我是一名外科醫生，我的病人很可能早就過世了！所以在這裏不用我的第一個問題，關於這個網站：多個addEventListener不存儲唯一回調

我的代碼：

function cAction(manipulatedElement) { 
    console.log(manipulatedElement); //test parameter 
    // some manipulation code... 
} 

var cboxes = document.getElementsByClassName('checkbox-toppings'); 

l = cboxes.length; 
for(i = 0; i < l; i++) { 
    cboxes[i].addEventListener('change', 
     function() { cAction(i); }, 
     false 
    ); 
}

當我檢查/取消我只得到「34」（最後一個複選框）寫入到控制檯，無論複選框哪一個檢查什麼給？每個事件監聽器的回調不應該記住索引號「我」嗎？

希望有人能幫助我。

一些HTML從項目粘貼：

<div class="toppings col-xs-6 col-sm-4 col-md-3"> 
    <div class="checkbox"><label> 
     <input 
      type="checkbox" 
      class="checkbox-toppings" 
      id="topp1010" 
      value="" 
      data-price="300" 
     > 
     <span class="toppings-text">pepperoni</span> 
    </label></div> 
</div> 

<div class="toppings col-xs-6 col-sm-4 col-md-3"> 
    <div class="checkbox"><label> 
     <input 
      type="checkbox" 
      class="checkbox-toppings" 
      id="topp1020" 
      value="" 
      data-price="300" 
     > 
     <span class="toppings-text">ham</span> 
    </label></div> 
</div> 

<!-- and 32 more items like this -->

來源

2015-11-24 Thorhallur

也許一小段HTML會幫助把這段代碼放在上下文中嗎？ –

@DarwinvonCorax HTML添加 – Thorhallur

使用.bind創建每個回調不同的功能。

function cAction(manipulatedElement) { 
    console.log(manipulatedElement); //test parameter 
    // some manipulation code... 
} 

var cboxes = document.getElementsByClassName('checkbox-toppings'); 
l = cboxes.length; 
for(i=0; i<l; i++) { 
    cboxes[i].addEventListener('change', cAction.bind(cboxes[i], i), false); 
}

來源

2015-11-24 03:06:54 bevacqua

這是作品！非常感謝@bevacqua，一直試圖谷歌這個問題超過2小時... – Thorhallur

歡迎的Closures概念。

i的值正在被您的處理程序捕獲或關閉，因此只會分配最後一個值i。

變化

function(){cAction(i);}

到

(function(temp){return function(){ 
    cAction(temp); 
}}(i))

來源

2015-11-24 03:03:53 Ramanlfc

多個addEventListener不存儲唯一回調

回答

相關問題