item.classList.toggle()失效，点击卡片无法翻转问题求助

核心问题分析 #

你的代码中，JavaScript逻辑是通过点击给卡片添加/移除flipped类，但CSS里没有定义.card.flipped对应的翻转样式——目前只有鼠标悬停（card:hover）的翻转效果，所以点击后不会触发任何视觉变化。另外，JavaScript使用了import语句，若直接通过普通<script>标签引入，浏览器会因无法识别ES模块语法报错。

具体修复步骤 #

1. 补充CSS的.card.flipped样式 #

在CSS代码中添加以下内容，为点击触发的翻转效果提供样式支持：

/* 点击卡片触发的翻转效果 */
.card.flipped {
    transform: rotateY(180deg) translate(0, 40px);
}

如果需要区分悬停和点击的不同效果，可以单独调整这个类的transform属性。

2. 修正JavaScript的脚本引入方式 #

在HTML的<script>标签中添加type="module"属性，让浏览器识别ES模块语法：

<script type="module" src="./FlipCard.js"></script>

3. 可选：规范HTML结构（避免潜在问题） #

你的HTML缺少<body>标签，虽然浏览器会自动补全，但建议将内容放在<body>内，保持结构规范：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="Stylesheets/FlipCardStyle.css">
    <link rel="stylesheet" href="Stylesheets/GridLayouts.css">
    <link rel="stylesheet" href="Stylesheets/Buttons.css">
</head>
<body>
    <div class="wrapper-horizontal">
        <!-- 卡片内容 -->
        <div class="card">
            <div class="card-face card-face-front"></div>
            <div class="card-face card-face-back"></div>
        </div>
        <div class="card">
            <div class="card-face card-face-front"></div>
            <div class="card-face card-face-back"></div>
        </div>
        <div class="card">
            <div class="card-face card-face-front"></div>
            <div class="card-face card-face-back"></div>
        </div>
        <div class="card">
            <div class="card-face card-face-front"></div>
            <div class="card-face card-face-back"></div>
        </div>
        <script type="module" src="./FlipCard.js"></script>
    </div>
    <button class="btn">Shuffle</button>
</body>
</html>

修复后的完整CSS示例 #

@import "GridLayouts.css";

.card {
    background: transparent;
    width: 117px;
    height: 200px;
    perspective: 1000px;
    position: relative;
    cursor: pointer;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.wrapper-horizontal .card {
    float: left;
    margin-right: -47px;
    margin-bottom: 20px;
}

/* 鼠标悬停翻转（可选保留） */
.card:hover {
    transform: rotateY(180deg) translate(0, 40px);
}

/* 点击触发的翻转效果 */
.card.flipped {
    transform: rotateY(180deg) translate(0, 40px);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card-face-front {
    background: url("...") -234px 0px;
}

.card-face-back {
    background: url("...");
    background-size: 100% 100%;
    transform: rotateY(180deg);
}

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