为何.cssText无法修改.unveil元素样式？技术求助

核心问题是事件冒泡：当你点击.unveil元素时，点击事件会向上传递到它的父容器（.container-card）。容器的click事件会立刻将.unveil重新设置为display:block，直接抵消了隐藏操作，所以看起来点击.unveil没有任何响应。

解决步骤 #

在.unveil的点击事件处理函数中添加e.stopPropagation()，阻止事件继续向上冒泡到父容器：

function unveilAnswer(){
    // let's add the flip functionality for showing the answers
    var unveilNode=null;
    // 建议把var i改成let i，避免循环变量泄漏
    for (let i=0; i<containerCards.length; i++)
        if (this===containerCards[i]) {
            unveilNode=this.querySelector(".unveil");
            this.addEventListener("click", e=>{
                unveilNode.style.cssText="display:block; height:95vh; width:95vw;";
            });
            unveilNode.addEventListener("click", (e)=>{
                // 阻止事件冒泡到父容器
                e.stopPropagation();
                unveilNode.style.cssText="display:none; width:0px; height:0px;";
                showCards();
                console.log(unveilNode);
            });
            hideCars(i);
        }
}

另外补充：原代码循环中使用var i会导致变量提升，循环结束后i的值会固定为containerCards.length，改成let i可以避免这类潜在问题。

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