多卡翻转jQuery

Question

我希望单独翻看多张卡片，但我并不精通jQuery / JS，而且我在查找代码时遇到问题，并且可以使用一些帮助。此外，点击时瓷砖也不会翻转。

＆＃13;

＆＃13;

rake

＆＃13;

$ rails -W db:create
rails db:create     /path/databases.rake:26:in `block in <top (required)>'
rails db:create:all /path/databases.rake:20:in `block (2 levels) in <top (required)>'

＆＃13;

$('.js-click').on('click', function() {
  $('.card').not(this).removeClass('flipped');
  $('.card').toggleClass('flipped');
});
$('.js-click1').on('click', function() {
  $('.card').not(this).removeClass('flipped');
  $('.card').toggleClass('flipped');
});

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先，您需要为这两张卡片提供js-click类，以便您可以使用相同的$('.js-click')选择器定位这两张卡片。然后，当您想要翻转目标的.card时，您所要做的就是在 $(this).parent() 上切换课程flipped。

这可以在以下内容中看到：

$('.js-click').on('click', function() {
  $(this).parent().toggleClass('flipped');
});

.flipContainer {
  width: 260px;
  height: 200px;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.card div {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 200px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .front {
  background: red;
}

.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card.flipped {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="flipContainer">
  <div class="card">
    <button class="js-click">+</button>
    <div class="front">Custom Installation</div>
    <div class="back">Custom Installation details</div>
  </div>
</section>
<section class="flipContainer">
  <div class="card">
    <button class="js-click">+</button>
    <div class="front">Custom Installation</div>
    <div class="back">Custom Installation details</div>
  </div>
</section>

Answer 2

看起来问题来自于尝试找到合适的.card元素（看起来它们正在查找它们）然后删除类+切换类将始终添加它：

1. 删除.flipped
2. toggle .flipped
3. .flipped总是添加

所以你永远不会把你的牌翻过来。

快速修复，查找点击的元素parent()并定位...

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

.flipContainer {
  width: 260px;
  height: 200px;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.card div {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 200px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .front {
  background: red;
}

.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card.flipped {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="flipContainer">
  <div class="card">
    <button class="js-click">+</button>
    <div class="front">Custom Installation</div>
    <div class="back">Custom Installation details</div>
  </div>
</section>
<section class="flipContainer">
  <div class="card">
    <button class="js-click">+</button>
    <div class="front">Custom Installation</div>
    <div class="back">Custom Installation details</div>
  </div>
</section>

Answer 3

您正在使用flipped切换所有元素的.card类，只需为关联元素（例如

）执行此操作

$(this).closest('.card').toggleClass('flipped');

此外，您可以通过将js-click类分配给两个按钮来减少代码

这是片段

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

.flipContainer {
  width: 260px;
  height: 200px;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.card div {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 200px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .front {
  background: red;
}

.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card.flipped {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="flipContainer">
  <div class="card">
    <button class="js-click">+</button>
    <div class="front">Custom Installation</div>
    <div class="back">Custom Installation details</div>
  </div>
</section>
<section class="flipContainer">
  <div class="card">
    <button class="js-click">+</button>
    <div class="front">Custom Installation</div>
    <div class="back">Custom Installation details</div>
  </div>
</section>