如何用单个reDisplay函数切换矩形尺寸？JS技术求助

我在学习JavaScript时遇到矩形尺寸切换功能无法正常工作的问题。需求是使用document.querySelectorAll，结合状态变量rectsAreBig=true，通过自定义的reDisplay()函数切换矩形尺寸，用状态变量记录当前尺寸状态并调用该函数。目前第一个矩形的颜色切换功能正常，但第二个矩形的尺寸切换代码失效。

CSS样式 #

.rect {
    background: red;
    width: 250px;
    height: 250px;
    margin: 10px;
    float: left;
}

.rect.blue {
    background: blue;
}

.rect.yellow {
    background: yellow;
}

.rect.green {
    background: green;
}

.smallRect {
    width: 150px;
    height: 150px;
    margin: 10px;
}

HTML结构 #

<div class="rectContainer">
    <div id="rect1" class="rect red"></div>
    <div id="rect2" class="rect red"></div>
    <div id="rect3" class="rect red"></div>
</div>

可正常运行的矩形颜色切换代码 #

let stateRect1Color = "blue";
let rectsAreBig = true;

let rectContainer = document.querySelector(".rect"); 
console.log(rectContainer);

rectContainer.addEventListener("click", function reDisplay() {
    for (let couleurs = 0; couleurs < 5; couleurs++) {
        console.log(couleurs);
        let lePremierRectangle = document.querySelector("#rect1"); 
        switch (stateRect1Color) {
            case "blue": 
                stateRect1Color = "red"; 
                lePremierRectangle.classList.remove("blue"); 
                lePremierRectangle.classList.add("red"); 
                break;
            case "red":
                stateRect1Color = "yellow"; 
                lePremierRectangle.classList.remove("red"); 
                lePremierRectangle.classList.add("yellow");
                break;
            case "yellow": 
                stateRect1Color = "green";
                lePremierRectangle.classList.remove("yellow"); 
                lePremierRectangle.classList.add("green"); 
                break;
            case "green":
                stateRect1Color = "blue"; 
                lePremierRectangle.classList.remove("green"); 
                lePremierRectangle.classList.add("blue");
                break;
            default:
                console.log();
        }
        console.log(stateRect1Color); 
    }
});

无法正常工作的矩形尺寸切换代码 #

let rectContainer2 = document.querySelectorAll(".rect"); 

rectContainer2.addEventListener("click", function reDisplay() {
    
    let leDeuxiemeRectangle = document.querySelector("#rect2"); 

    for (let i = 0; i < TousLesRectangles.length; i++) {
        
        if (rectsAreBig == true) {
            console.log((rectsAreBig = true)); 
            
            rectsAreBig = false; 
            leDeuxiemeRectangle.classList.remove(".smallRect");
            console.log(smallRect); 

            leDeuxiemeRectangle.classList.add(".smallRect"); 
            console.log(); 
        } else {
            rectsAreBig = true;

            leDeuxiemeRectangle.classList.remove(".smallRect"); 

            leDeuxiemeRectangle.classList.add(".smallRect"); 
            console.log();
        }
        console.log(rectsAreBig);
    }
});

问题排查 #

1. querySelectorAll事件绑定错误：document.querySelectorAll(".rect")返回的是NodeList集合，不能直接调用addEventListener，必须遍历每个元素单独绑定事件。
2. 类名操作语法错误：使用classList.remove/add时，类名不需要加.，应该写"smallRect"而非".smallRect"。
3. 尺寸切换逻辑无效：无论rectsAreBig状态如何，代码都先移除再添加同一个类，等于没有切换；且循环中使用了未定义的TousLesRectangles变量。
4. 函数重复定义冲突：颜色切换代码中已定义reDisplay函数，尺寸切换代码重复定义会覆盖原有函数，导致逻辑混乱。

修复后的代码 #

整合功能，使用单个reDisplay函数同时处理颜色切换和尺寸切换：

let stateRect1Color = "blue";
let rectsAreBig = true;

// 获取所有矩形、第一个矩形、第二个矩形
const allRects = document.querySelectorAll(".rect");
const rect1 = document.querySelector("#rect1");
const rect2 = document.querySelector("#rect2");

// 给每个矩形绑定点击事件
allRects.forEach(rect => {
    rect.addEventListener("click", reDisplay);
});

// 统一的reDisplay处理函数
function reDisplay(e) {
    // 点击第一个矩形时切换颜色
    if (e.target === rect1) {
        switch (stateRect1Color) {
            case "blue": 
                stateRect1Color = "red"; 
                rect1.classList.remove("blue"); 
                rect1.classList.add("red"); 
                break;
            case "red":
                stateRect1Color = "yellow"; 
                rect1.classList.remove("red"); 
                rect1.classList.add("yellow");
                break;
            case "yellow": 
                stateRect1Color = "green";
                rect1.classList.remove("yellow"); 
                rect1.classList.add("green"); 
                break;
            case "green":
                stateRect1Color = "blue"; 
                rect1.classList.remove("green"); 
                rect1.classList.add("blue");
                break;
            default:
                break;
        }
    }

    // 切换第二个矩形的尺寸
    if (rectsAreBig) {
        rect2.classList.add("smallRect");
    } else {
        rect2.classList.remove("smallRect");
    }
    // 翻转尺寸状态
    rectsAreBig = !rectsAreBig;
}

修复说明 #

• 移除重复的函数定义，统一用reDisplay处理所有点击事件。
• 正确遍历querySelectorAll返回的集合，给每个矩形绑定事件。
• 修正类名操作的语法错误，去掉类名前的.。
• 调整尺寸切换逻辑：根据rectsAreBig状态添加/移除类，之后翻转状态变量实现切换效果。
• 通过事件目标判断，区分执行颜色切换和尺寸切换的逻辑。

内容的提问来源于stack exchange，提问作者Conrad