Question

点击后，我希望点击的卡片翻转并露出背面。一切顺利，除了第一次点击后需要两次点击才能获得所需的功能。

问题是我希望这只能通过一次点击工作。我对jQuery很新，所以我期待这可能是我忽略的一个基本问题。

这是jQuery：

function flip() {
  jQuery('.flip').click(function() {
    jQuery(this).find('.card').toggleClass('flipped');
  });
}

.ot-front {
  background-color: blue;
}

.ot-back {
  background-color: red;
}

.team-member {
  display: inline-flex;
  width: 200px;
  height: 260px;
  position: relative;
  border: 1px solid #ccc;
  perspective: 800px;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform .3s;
  transform-style: preserve-3d;
}

.card div {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  position: absolute;
  backface-visibility: hidden;
}

.card .ot-back {
  background: #eee;
  transform: rotateY( 180deg);
}

.card.flipped {
  transform: rotateY( 180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="team-members">
  <div class="team-member flip">
    <div class="card" onclick="flip()">
      <div class="ot-front">FRONT</div>
      <div class="ot-back">BACK</div>
    </div>
  </div>
  <div class="team-member flip">
    <div class="card" onclick="flip()">
      <div class="ot-front">FRONT</div>
      <div class="ot-back">BACK</div>
    </div>
  </div>
  <div class="team-member flip">
    <div class="card" onclick="flip()">
      <div class="ot-front">FRONT</div>
      <div class="ot-back">BACK</div>
    </div>
  </div>
</div>

Answer 1

可能是因为你将jQuery包装成一个函数。因此，要使其正常工作，您需要单击一次以调用函数，然后再调用另一个函数，以使jQuery函数正常工作。

尝试删除外部function flip()并查看它是否有效。

Answer 2

只需删除外部功能即可。看起来应该是这样的：

$('.flip').click(function(){
  $(this).find('.card').toggleClass('flipped');
});

它在codepen中运行得很好。

Answer 3

如果你这样实现它：

function flip(wrapperContainingElementToFlip) {
    wrapperContainingElementToFlip.find('.card').toggleClass('flipped');
}

jQuery('.flip').click(function () {
    flip($(this));
});

您将在加载脚本时绑定单击。

您还可以通过将代码包装在页面加载事件处理程序中来绑定页面加载时的click事件处理程序，如下所示：

$(document).ready(function() {
    //Put your code here
});

通过实现上面的代码，单击元素时，将调用一个函数。 click事件将在调用flip函数之前绑定，因此将执行。

我认为这将解决您的问题。

Answer 4

你的逻辑加倍了。您在单击时调用flip，然后订阅click，然后仅在处理程序中进行翻转。删除外部函数，HTML（和jQuery）中的处理程序：

Array.from(document.querySelectorAll(".card")).forEach(element =>
  element.addEventListener("click", () =>
    element.classList.toggle('flipped')
  )
);

.ot-front {
    background-color: blue;
}
.ot-back {
    background-color: red;
}
.team-member {
    display: inline-flex;
    width: 200px;
    height: 260px;
    position: relative;
    border: 1px solid #ccc;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}
.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: -o-transform .3s;
    transition: transform .3s;
    -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: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
.card .ot-back {
    background: #eee;
    -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 );
}

<div class="team-members">
  <div class="team-member flip">
    <div class="card">
      <div class="ot-front">FRONT</div>
      <div class="ot-back">BACK</div>
    </div>
  </div>
  <div class="team-member flip">
    <div class="card">
      <div class="ot-front">FRONT</div> 
      <div class="ot-back">BACK</div>
    </div>
  </div>
  <div class="team-member flip">
    <div class="card">
      <div class="ot-front">FRONT</div>
      <div class="ot-back">BACK</div>
    </div>
  </div>
</div>

jQuery卡翻转需要两次点击才能工作

4 个答案: