Question

我正在研究CSS3翻转卡布局。 CodePen中有很多样本，但它们包含了不必要的混乱。我设法得到了“骨头”。版本，但我无法定位特定卡。我想添加id但是在JS中选择它们需要一些字符串操作，我认为这有点矫枉过正，而且我有一种更简单的方法。

这一行是问题所在： $('.card_container>.card').toggleClass('flipped');我想说＆＃34;在当前.card下选择.card_container我点击了＆＃34;。

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

每次点击.card时，都会将此更改添加到您的jQuery代码中，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>

当前所选类

1 个答案: