仅在for循环中的第一个迭代元素上删除类

Question

我为我的网站开发了一个模态脚本，用于激活和取消激活页面上的模态。

激活模态本身就可以正常工作。然而，当涉及去激活它们时，这是一个问题。我们的想法是，当用户按下esc时，页面上当前激活的所有模式都会关闭。

出于某种原因，for循环（应该遍历所有打开模态），只迭代一次。

这是页面上两个模态（和触发器）的外观示例：

<!-- these triggers and modals will be de-activated !-->
<a class="trigger-active">Trigger 1</a>
<div class="modal-active">Modal 1</div>

<!-- these ones won't !-->
<a class="trigger-active">Trigger 2</a>
<div class="modal-active">Modal 2</div>

这是我的 JavaScript ：

document.onkeydown = function(e){
    e = e || window.event;
    var escape = false,
        activeTrigger = document.getElementsByClassName("trigger-active"),
        activeModal = document.getElementsByClassName("modal-active");

    if("key" in e){
        escape = (e.key == "Escape" || e.key == "Esc");
    } else {
        escape = (evt.keyCode == 27);
    }

    if(escape){
        for(var i = 0; i < activeTrigger.length; i++){
            console.log("Trigger " + i);
            activeTrigger[i].className = activeTrigger[i].className.replace(triggerRegex, "");
        }
        for(i = 0; i < activeModal.length; i++){
            console.log("Modal " + i);
            activeModal[i].className = activeModal[i].className.replace(modalRegex, "");
        }
    }
}

如果我检查console的迭代计数，我得到的只是

Trigger 0
Modal 0

而不是：

Trigger 0
Modal 0
Trigger 1
Modal 1

之前我曾经多次使用过for个循环，而这在我之前从未发生过，所以所有的帮助都会受到赞赏。

干杯。