javascript - 当前所选类中的目标类

Question

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

这一行是问题所在: $('.card_container>.card').toggleClass('flipped');我想说“在我正在单击的当前 .card 下选择 .card_container”。

代码笔:https://codepen.io/reiallenramos/pen/bYWKyv

$('.card_container').on('click', function () {
  $('.card_container>.card').toggleClass('flipped'); #help me change this line
});

--

body, html {
  margin: 0;
  background-color: tomato;
  font-size: 2em;
  font-family: sans-serif;
}

.wrapper{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(100px, auto);
  grid-gap: 2px;
  margin: 10px;
  height: 100vh;
  align-items: center;
}

.card_container {
  cursor: pointer;
  position: relative;
  width: 300px;
  height: 200px;
}

.card {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 0px;
  position: absolute;
  height: 100%;
  width: 100%;
  div {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    background-color: #eee;
    height: 100%;
    width: 100%;
  }

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

  &.flipped{
    transform: rotateY(180deg);
  }
}

--

<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>

Answer 1

将此更改添加到您的 jQuery 代码中，每次当您单击 .card 时，jQuery this 关键字会在该单击的元素上切换类，而不是在所有 上切换类.card.

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

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

body, html {
  margin: 0;
  background-color: tomato;
  font-size: 2em;
  font-family: sans-serif;
}

.wrapper{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: minmax(100px, auto);
  grid-gap: 2px;
  margin: 10px;
  height: 100vh;
  align-items: center;
}

.card_container {
  cursor: pointer;
  position: relative;
  width: 300px;
  height: 200px;
}

.card {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 0px;
  position: absolute;
  height: 100%;
  width: 100%;
  div {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    background-color: #eee;
    height: 100%;
    width: 100%;
  }
  
  .back {
    transform: rotateY(180deg);
  }
    
  &.flipped{
    transform: rotateY(180deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>