我有多个元素被分成两个div。第一个div包含一个文本，第二个div包含一个颜色。当我点击一个元素时，文本和颜色应该会改变，如果我再次点击它，它应该会变回来。问题是无论我点击哪个，总是最后一个改变。
HTML部分：

<style>
    .colorGreen {
        background-color: green;
    }

    .colorRed {
        background-color: red;
    }
</style>

<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>

JavaScript部分：

<script type='text/javascript'>
    var box1Temp = document.querySelectorAll(".box1");
    var box2Temp = document.querySelectorAll(".box2");
    for (var i = 0; i < box1Temp.length; i++) {
        var box1 = box1Temp[i];
        var box2 = box2Temp[i];
        box2.onclick = box1.onclick = function() {
            if (box1.classList.contains("colorGreen")) {
                box1.classList.add("colorRed");
                box1.classList.remove("colorGreen");
                box2.innerHTML = "Text2";
            } else {
                box1.classList.add("colorGreen");
                box1.classList.remove("colorRed");
                box2.innerHTML = "Text1";
            }
        }
    }
</script>

当我只使用一个div时，它是有效的。然后我可以使用'this'，而不是'box1'变量，来寻址正确的元素。但是如果我用'this'替换'box1'，它仍然是文本div发生了变化。（我知道这是显而易见的，但我迷路了）