Javascript 当前选定类中的目标类

我正在研究CSS3翻转卡片布局。CodePen中有很多示例，但它们包含不必要的混乱。我已经设法获得了“基本”版本，但我无法针对特定的卡。我曾考虑过添加ID，但在JS中选择它们需要一些字符串操作，我认为这太过分了，我缺少了一种更简单的方法

这条线就是问题所在：

$（'.card\u container>.card'）.toggleClass（'fliped'）

我想说“在我正在单击的当前

.card\u容器下选择
.card
”

代码笔：

--

--


轻弹
一
轻弹
二
轻弹
三
轻弹
四
每次单击
.card
时，将此更改添加到jQuery代码中，jQuery
此
关键字将在单击的元素上切换类，而不是在所有
.card
上切换类

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


$（'.card\u container>.card'）。打开（'单击'，函数（）{
$（this.toggleClass（'flipped'）；
});
body，html{
保证金：0；
背景色：番茄；
字号：2em；
字体系列：无衬线；
}
.包装纸{
显示：网格；
网格模板列：重复（4，1fr）；
网格模板行：最小最大值（100px，自动）；
网格间距：2px；
利润率：10px；
高度：100vh；
对齐项目：居中；
}
.card_容器{
光标：指针；
位置：相对位置；
宽度：300px；
高度：200px；
}
.卡片{
变换样式：保留-3d；
变换：变换0.8s三次贝塞尔（0.175,0.885,0.32,1.275）；
填充：0px；
位置：绝对位置；
身高：100%；
宽度：100%；
div{
位置：绝对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背面可见性：隐藏；
背景色：#eee；
身高：100%；
宽度：100%；
}
.回来{
变换：旋转（180度）；
}
&.翻了{
变换：旋转（180度）；
}
}

轻弹
一
轻弹
二
轻弹
三
轻弹
四
每次单击
.card
时，将此更改添加到jQuery代码中，jQuery
此
关键字将在单击的元素上切换类，而不是在所有
.card
上切换类

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


$（'.card\u container>.card'）。打开（'单击'，函数（）{
$（this.toggleClass（'flipped'）；
});
body，html{
保证金：0；
背景色：番茄；
字号：2em；
字体系列：无衬线；
}
.包装纸{
显示：网格；
网格模板列：重复（4，1fr）；
网格模板行：最小最大值（100px，自动）；
网格间距：2px；
利润率：10px；
高度：100vh；
对齐项目：居中；
}
.card_容器{
光标：指针；
位置：相对位置；
宽度：300px；
高度：200px；
}
.卡片{
变换样式：保留-3d；
变换：变换0.8s三次贝塞尔（0.175,0.885,0.32,1.275）；
填充：0px；
位置：绝对位置；
身高：100%；
宽度：100%；
div{
位置：绝对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背面可见性：隐藏；
背景色：#eee；
身高：100%；
宽度：100%；
}
.回来{
变换：旋转（180度）；
}
&.翻了{
变换：旋转（180度）；
}
}

轻弹
一
轻弹
二
轻弹
三
轻弹
四
@j08691谢谢man@j08691谢谢男士欢迎@reiallenramos:-）欢迎@reiallenramos:-）
<div class="wrapper">
  <div class="card_container">
    <div class="card">
      <div class="front">flip</div>
      <div class="back">one</div>
    </div>
  </div>
  <div class="card_container">
    <div class="card">
      <div class="front">flip</div>
      <div class="back">two</div>
    </div>
  </div>
  <div class="card_container">
    <div class="card">
      <div class="front">flip</div>
      <div class="back">three</div>
    </div>
  </div>
  <div class="card_container">
    <div class="card">
      <div class="front">flip</div>
      <div class="back">four</div>
    </div>
  </div>
</div>

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