使用jQuery转换div来显示另一个

Question

即时尝试转换div而不是显示另一个div我使用了javascript并且它可以工作但我想将它应用于超过1组div，所以我想使用类而不是id＆＃39; s。

＆＃13;

＆＃13;

var init = function() {
    var card = document.getElementById('card');

    document.getElementById('flip').addEventListener( 'click', function() {
        card.toggleClassName('flipped');
    }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

var init = function() {
    var card = document.getElementById('card');

    document.getElementById('flipback').addEventListener( 'click', function() {
        card.toggleClassName('flipped');
    }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

＆＃13;

	<section class="container">
  		<div id="card">
		    <figure class="front" id="flip"></figure>
		    <figure class="back" id="flipback">Bitpong was een project waarbij ik en een groep studenten een bedrijf</figure>
 		 </div>
	</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<强> HTML

$(".flip").hover(function() {
  $(this).find(".card").toggleClass("flipped");
  return false;
});

<强>的jQuery

.flip {
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
  width: 240px;
  height: 310px;
  position: relative;
  margin: 0px auto;
}

.flip .card.flipped {
  transform: rotatey(-180deg);
  -ms-transform: rotatey(-180deg);
  /* IE 9 */
  -moz-transform: rotatey(-180deg);
  /* Firefox */
  -webkit-transform: rotatey(-180deg);
  /* Safari and Chrome */
  -o-transform: rotatey(-180deg);
  /* Opera */
}

.flip .card {
  width: 200px;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
}

.flip .card .face {
  width: 200px;
  height: 100%;
  position: absolute;
  text-align: center;
  backface-visibility: hidden;
  /* W3C */
  -webkit-backface-visibility: hidden;
  /* Safari & Chrome */
  -moz-backface-visibility: hidden;
  /* Firefox */
  -ms-backface-visibility: hidden;
  /* Internet Explorer */
  -o-backface-visibility: hidden;
  /* Opera */
}

.flip .card .front {
  position: absolute;
  background: white;
}

.flip .card .back {
  background: white;
  transform: rotatey(-180deg);
 -ms-transform: rotatey(-180deg);
  /* IE 9 */
  -moz-transform: rotatey(-180deg);
  /* Firefox */
  -webkit-transform: rotatey(-180deg);
  /* Safari and Chrome */
  -o-transform: rotatey(-180deg);
  /* Opera */
}

<强> CSS

var allAbove = (from item in userQuery
           where (item.Id!= myData.Id && 
           item.TotalPoints > myData.TotalPoints ||
           (item.TotalPoints == myData.TotalPoints && 
           item.CorrectTrends >= myData.CorrectTrends)));

https://jsfiddle.net/oxn1ccd9/

这肯定有用。快乐编码：）

Answer 2

$(function() {
  $('.flip').click(function(e) {
    e.preventDefault();
    $(this).closest('.card').toggleClass('flipped');
  });
});

.front, .back {
  transition: transform 0.25s linear;
  backface-visibility: hidden;
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
}

.front {
  background: #0f0;
  z-index: 2;
  transform: rotateY(0deg);
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container">
  <div class="card">
    <figure class="flip front">Lorem ipsum dolor sit amet</figure>
    <figure class="flip back">Bitpong was een project waarbij ik en een groep studenten een bedrijf</figure>
  </div>
</section>