微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

    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 举报,一经查实,本站将立刻删除。