点击激活翻转卡片答案

【问题标题】：Flip Card Activated By Click点击激活翻转卡片
【发布时间】：2021-08-14 22:34:02
【问题描述】：

我正在尝试制作一张在点击时会翻转的翻转卡片（即不是：hover 或 :activate）。还没有多余的装饰（除了影子，这是为了回应朋友的挑战），只是基本的功能。我关注了关于这种方法的各种有用的帖子，但我无法让它发挥作用。谁能看到我做错了什么？编辑：抱歉，在阅读了这里的其他各种帖子后，我的工作中仍有一些旧代码。现在删除了复选框的代码。 EDIT2：解决了。需要 jQuery 'ready' 方法，在下面的代码中添加。

<!DOCTYPE html>
<html>
<head>
<title>Flip Card Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function(){
    $('.card').click(function(e){
    e.preventDefault();
    $(this).toggleClass('flipped');
    })
})
</script>

<style>
.card {
width: 300px;
height: 300px;
margin: 25px;
perspective: 1000px;
cursor: pointer;
transition: transform 1s;
transform-style: preserve-3d;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

.card.flipped {
transform: rotateY( 180deg );
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
padding: 25px;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}

.card-back {
transform: rotateY(180deg);
}

</style>
</head>
<body>
    <div class="card">
        <div class="card-front">
            The front
        </div>
        <div class="card-back">
            The back
        </div>
    </div>
</body>
</html>

【问题讨论】：

您可能需要查看此站点以获取更多上下文。最好看另一个例子来找出你的代码有什么问题：codegrepper.com/code-examples/css/card+animation+css
label 和 class="card" 没有关闭标签。尝试添加。
嗨，不知道“请”这个词是如何添加到该行的末尾但现在已编辑的。不幸的是，仍然无法正常工作。

标签： html jquery css

【解决方案1】：

为此，您只需要这样做

$('.card').click(function(e){
    e.preventDefault();
    $(this).toggleClass('flipped');
})

无论如何，这给我带来了许多问题。

这里为什么需要jquery，你可以在纯CSS中使用:checked
您将单击处理程序添加到用于包装器和标签的类card ，这会导致不必要地触发此处理程序，我建议您提供特殊的类名称（例如js-handler-click）需要点击处理程序的元素

$('.card').click(function(e){
    e.preventDefault();
    $(this).toggleClass('flipped');
})

.card {
width: 300px;
height: 300px;
margin: 25px;
perspective: 1000px;
cursor: pointer;
transition: transform 1s;
transform-style: preserve-3d;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

.card.flipped {
transform: rotateY( 180deg );
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}

.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
padding: 25px;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}

.card-back {
transform: rotateY(180deg);
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div class="card">
    <div class="card-front">
        The front
    </div>
    <div class="card-back">
        The back
    </div>
</div>

【讨论】：

感谢亚历山大。请参阅我对我错误发布的混合代码的编辑。不幸的是，您对 jquery 的建议没有帮助。正如您所建议的，我必须围绕 CSS 选项进行更多研究。
上一个答案忘记传递e作为函数参数，现在写了一个sn-p
非常感谢。您的代码 sn-p 在原位运行时完全符合我的目标，不幸的是，当我将代码复制到我的代码中时，仍然没有乐趣。我在Win10和Chrome上。我已经编辑了上面的代码以显示您的建议。感谢您的帮助。
也许你的控制台有一些错误？
没有控制台错误。在 Firefox 中尝试过，但仍然没有乐趣。尝试将其作为 .html 文件保存在记事本中，而不是通过 ISS（wwwroot 中的索引文件）。