Question

长话短说，这是我第二次在24小时内发布Stackoverflow。不用说，我越来越接近我的回答，但我被困在一件小事上。

基本上，我正在使用Cocoon，它可以帮助嵌套表单，所以当用户想要创建另一个项目时，她将不得不提交2个表单，因此，将有多个具有相同类的项目。

这是我的代码。

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

我已经创建了一个简单的示例，说明了您要实现的目标。也许这有助于理解代码中可能出现的问题，因为在这里我无法全面了解。

＆＃13;

let boxes = document.getElementsByClassName("box");
console.log(boxes);

for(box of boxes) {
	box.addEventListener("keyup", function (event) {
    	alert(this.id);
    });
}

＆＃13;

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

＆＃13;

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

＆＃13;

elements [i] .onkeyup = function（）仅触发第一类元素

1 个答案: