【Web前端问题】多条目用js设置className，来动态改变箭头样式时出错

Z时代
2024-01-10
分类：技术分享

在没改变下拉箭头朝向时效果图：
图片描述

一切正常，点条目出现详情。现在我想在出现详情时改变箭头朝向。于是我想用改变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)
    }}