jQueryを使用して別の1つを表示するdivを有効にする

Question

私はdivを有効にして別のdivを表示しようとしています。私はjavascriptを使用していますが、それは複数のdivグループに適用したいので、 IDではない

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

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

Answer 1

HTML

<div class="flip"> 
    <div class="card"> 
    <div class="face front"> Hello </div> 
    <div class="face back"> 
     You turned me 
    </div> 
    </div> 
</div> 

jQueryの

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

CSS

.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 */ 
} 

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>