elements [i] .onkeyup = function（）僅針對第一類元素觸發

Question

長話短說，這是我第二次在24小時內發佈在Stackoverflow上。無情，我越來越接近我的答案，但我陷入了一件小事。

基本上，我使用Cocoon，它可以幫助嵌套窗體，所以當用戶想要創建另一個項目時，她將不得不提交2個窗體，因此，將有超過1個項目具有相同的類。

這是我的代碼。

var stopTimeElement = document.getElementsByClassName('mdl-textfield__input stage-time stop_time'); 

for (var i=0; i<stopTimeElement.length; i++){ 
    stopTimeElement[i].onkeyup = function() { 
    debugger; 
    var stopTimeVal = parseInt(this.value) 
    var index = parseInt($(currentStage()).attr('rel')) - 1 
    stopTimeArray[index] = stopTimeVal 
    wtf = stopTimeArray; 
    console.log('----wtf----: ',wtf) 
    componentHandler.upgradeDom(); 
    updateTTH(); 
    //reRun(); 
    } 
} 

因此，在第一種形式，它工作正常。但對於其他所有人來說，它甚至不會被觸發。 :(

我甚至嘗試包裝的功能等......

function reRun() { 
    // code here 
} 

reRun() 

我知道這是一個有點凌亂與混音的JavaScript和jQuery，但讓我知道你的想法！

Answer 1

這是JS標準範圍的可見性問題。你應該只是包裝你內部功能到iife。

for (var i=0; i<stopTimeElement.length; i++){ 
    (function (i) { 
    stopTimeElement[i].addEventListener("keyup", function() { 
     debugger; 
     var stopTimeVal = parseInt(this.value) 
     var index = parseInt($(currentStage()).attr('rel')) - 1 
     stopTimeArray[index] = stopTimeVal 
     wtf = stopTimeArray; 
     console.log('----wtf----: ',wtf) 
     componentHandler.upgradeDom(); 
     updateTTH(); 
     //reRun(); 
    }); 
    })(i); 
} 

更新1

我已經創建了一個簡單的示例，說明您正在嘗試實現的內容。也許這將有助於理解你的代碼中可能出現的錯誤，因爲在這裏我看不到完整的圖片。

let boxes = document.getElementsByClassName("box"); 
 
console.log(boxes); 
 

 
for(box of boxes) { 
 
\t box.addEventListener("keyup", function (event) { 
 
    \t alert(this.id); 
 
    }); 
 
}

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    background-color: darkgray; 
 
} 
 

 
.box:hover { 
 
    background-color: lightgray; 
 
}

<input id="1" class="box"></input> 
 
<input id="2" class="box"></input> 
 
<input id="3" class="box"></input> 
 
<input id="4" class="box"></input>