多条目用js设置className，来动态改变箭头样式时出错

Question

求大神调试https://codepen.io/xyj/pen/KR...在没改变下拉箭头朝向时效果图：一切正常，点条目出现详情。现在我想在出现详情时改变箭头朝向。于是我想用改变className,调用不同样式的方法，代码如下：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 = "展开";                    triA[i].className = "tri1";                    triB[i].className = "tri2";                    j[i] = -j[i];                }            })        })(i)    }}开始点两个条目没事，后来就出现异常Cannot set property 'className' of undefinedat HTMLDivElement

Answer 1

楼上把问题的原理都说清楚了不赘述了

why not尝试一下document.querySelectorAll呢