多條目用js設(shè)置className，來(lái)動(dòng)態(tài)改變箭頭樣式時(shí)出錯(cuò)

求大神調(diào)試https://codepen.io/xyj/pen/KR...

在沒(méi)改變下拉箭頭朝向時(shí)效果圖：
圖片描述

一切正常，點(diǎn)條目出現(xiàn)詳情。現(xiàn)在我想在出現(xiàn)詳情時(shí)改變箭頭朝向。于是我想用改變className,調(diào)用不同樣式的方法，代碼如下：

window.onload = function(){
    var details = document.getElementsByClassName("detail");
    var items = document.getElementsByClassName("items");
    var flex = document.getElementsByClassName("flex");
    var triA = document.getElementsByClassName("tri1");
    var triB = document.getElementsByClassName("tri2");
    j = [1,1,1,1]
    for (var i = 0; i < details.length; ++i){
        (function(i){
            console.log(triA[i]);
            details[i].addEventListener("click",function(){
                if(j[i] > 0){
                    items[i].style.display = "block";
                    flex[i].innerText = "收起";
                    triA[i].className = "tri3";
                    triB[i].className = "tri4";
                    j[i] = -j[i];
                }
                else if (j[i] < 0){
                    items[i].style.display = "none";
                    flex[i].innerText = "展開(kāi)";
                    triA[i].className = "tri1";
                    triB[i].className = "tri2";
                    j[i] = -j[i];
                }
            })
        })(i)
    }
}

開(kāi)始點(diǎn)兩個(gè)條目沒(méi)事，后來(lái)就出現(xiàn)異常

Cannot set property 'className' of undefinedat HTMLDivElement

回答

編輯回答