Javascript 多个翻转框-但仅翻转单击的一个

我的挑战是，我有两排盒子，我想独立翻转。不能使用悬停，因为对某些用户来说，这在视觉上太混乱了。因此，我有一个JQuery脚本，可以在类之间切换，但是，当应用到多个框时，我会让所有框同时旋转。我想能够翻转只有一个点击像悬停效果。如果我给每个框一个单独的类，我就可以做到这一点，但这需要很多额外的CSS，我知道必须有更好、更干净的方法。请帮忙。：）

以下是jquery代码：$（'.card'）是我想要使用的，而不是（'cardOne'，'.cardtow2'，等等）

这里是CSS（太麻烦了）：

当然，还有HTML（但我将把它分成两个框）：

焦虑

偶尔的焦虑是生活中正常的一部分。当你在工作中遇到问题、考试前或做出重要决定时，你可能会感到焦虑。但焦虑症不仅仅是暂时的担忧或恐惧

不孕

悲伤是不孕不育的真正原因。流产或死产可能会加重这种症状，但当一对夫妇不能怀孕时，这种症状同样存在

使用以下方法：

$('.container').on('click', '.card', function(){
  $(this).toggleClass('flipped');
});

使用此逻辑，我们使用脚本将事件处理程序绑定到卡的父容器。任何时候点击一张卡片，它都会在被点击的卡片上切换翻转的类

$（'.container'）。在（'click'，'.card'，函数（）上{
$（this.toggleClass（'flipped'）；
});
.card{
显示：内联块；
最小宽度：100px；
最小高度：80px；
边框：1px纯黑；
}
.card.fliped{背景色：红色；}

试试这个：

$('.card').on('click', function() {
    $(this).toggleClass('flipped');
}

您只需要一个类
.card
减少写操作等

Ps：删除函数degration并用上面的代码替换它，并从您的
HTML
$（'.card'）
全局查找具有类的元素中删除所有
onclick=“flip（）”
。这样就可以匹配多个元素。但是我甚至没有在你的标记中看到这个类，我也没有看到你在任何地方调用这个方法。我的错。我在另一页上更改了它。每张卡的类只有“.card”，但我将它们改为“cardOne、cardtow2等”，以使其独立工作。我真的希望脚本只使用一个类。不能用环路或开关吗？谢谢，塔普拉，我会试试的。它不起作用。塔普拉。我一定是做错了什么。我已经将您提供的添加到它自己的“flip”函数中，并将其与onclick事件一起放入html中，现在什么都没有发生。不，您在html中不做任何onclick。此逻辑本身创建单击绑定。您应该能够从字面上理解答案中的javascript并按原样使用它。从代码段中可以看到，没有内联onclick绑定。这是不需要的，不使用内联绑定和将标记与javascript逻辑分离是首选的做法。很高兴你弄明白了，：）
<div class="container">                
            <div class="cardOne" onclick="flipOne()">
                <div class="front">
                    <!-- front content -->
                    <p>anxiety</p>
                </div>
                <div class="back">
                    <!-- back content -->                        
                    <p>Occasional anxiety is a normal part of life. You might feel anxious when faced with a problem at work, before taking a test, or making an important decision. But anxiety disorders involve more than temporary worry or fear.  </p>

                </div>
            </div><!-- end flipper -->

        </div>
    </div> <!-- end col-1 -->

    <div class="col-1">   
        <div class="container">
            <div class="cardTwo" onclick="flipTwo()">
                <div class="front">
                    <!-- front content -->
                    <p>infertility</p>
                    </div>
                <div class="back">
                    <!-- back content -->
                    <p>Grief is a real part of infertility. It may be heightened in miscarriages or stillbirths, but it is just as real when a couple cannot conceive.</p>

                </div>
            </div>
        </div>
    </div><!-- end col-1 -->

$('.container').on('click', '.card', function(){
  $(this).toggleClass('flipped');
});

$('.card').on('click', function() {
    $(this).toggleClass('flipped');
}