无法在循环内的事件侦听器中获得循环间隔

问题描述

我有这个东西要循环并制作一堆输入字段，以及一个复选框，以清除同一行中的输入字段。

    var modalBody = document.getElementById("edit-body")
    function createPeriodsEditor(sequence){
     for(var i=1; i<7; i++){
        console.log(i)
        var container = document.createElement("div")
        var hour = document.createElement("input")
        var minute = document.createElement("input")
        var active = document.createElement("input")
        var text = document.createElement("p")

        container.setAttribute("class","row")
        text.innerHTML = "Period " + i
        hour.setAttribute("class","column")
        hour.setAttribute("id","periodInputHourS" + sequence + "P" + i)
        hour.setAttribute("placeholder","Hour (24 scale)")
        minute.setAttribute("class","column")
        minute.setAttribute("id","periodInputMinuteS" + sequence + "P" + i)
        minute.setAttribute("placeholder","Minute")
        active.setAttribute("type","checkBox")
        active.setAttribute("id","periodInputActiveS" + sequence + "P" + i)
        active.setAttribute("class","column")
        active.setAttribute("checked","")

        active.addEventListener( 'change',function() {
            console.log(i)
            if(!this.checked) {
                hour.value = ""
                minute.value = ""
            }
        });

        container.appendChild(hour)
        container.appendChild(minute)
        container.appendChild(active)

        modalBody.appendChild(text)
        modalBody.appendChild(container)
    }
}

但是，由于某些原因，每个复选框（id =“ active”）仅清除该行中最后创建的输入字段。

当我在循环中登录i时，它可以正确执行（1,2,3,4,5,6,7），但无论哪个复选框，它都仅显示7（console.log位于事件监听器的内部）复选框更改）我在点击。我在做什么错了？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript loops