使用for循环迭代两组选择器（querySelectorAll）

Question

我正在尝试使用querySelectorAll遍历2组HTML元素，并将点击处理程序应用于匹配的索引（抱歉，如果这令人困惑）。

以下是代码。

campaignSelect和campaignDetails每个都有6个div，我尝试做的是，当点击campaignSelect[i]时，将一个类添加到同一个campaignDetails[i]索引。

当我运行下面的代码时，我得到“无法读取未定义的属性'classList'”。但是，如果我使用实际索引campaignSelect[0]和campaignDetails[0]，则会有效。我在for循环中做错了什么？

谢谢！

var campaignSelect = document.querySelectorAll(".campaign-select");
var campaignInfo = document.querySelector(".campaign-info-container");
var campaignDetails = document.querySelectorAll(".campaign-details");

for(i=0;i<campaignSelect.length;i++){
    campaignSelect[i].addEventListener("click", function(){
        campaignInfo.classList.add("campaign-info-active");
        campaignDetails[i].classList.add("campaign-details-active");
    });
}