javascript - Flipping div's with onclick - Stack Overflow

admin管理员组

文章数量:1391987

ok, sorry for amateur status but i need a little help. All i want to do is have a div(mian) with 2 divs in it (div-front), (div-back), that when I click main div the div-front and div back rotate. then when main div is clicked again they rotate back.

<div id="main"> <div id="front">Some text</div> <div id="back">Some other text</div> </div>

this is kinda the setup I'm referring to. I have tried using a toggleClass but I assume I just dont understand it enough. Any Help is appreciated. Thanks in advance.

ok, sorry for amateur status but i need a little help. All i want to do is have a div(mian) with 2 divs in it (div-front), (div-back), that when I click main div the div-front and div back rotate. then when main div is clicked again they rotate back.

<div id="main"> <div id="front">Some text</div> <div id="back">Some other text</div> </div>

this is kinda the setup I'm referring to. I have tried using a toggleClass but I assume I just dont understand it enough. Any Help is appreciated. Thanks in advance.

• javascript
• rotatetransform

Share Improve this question Follow asked May 23, 2014 at 16:49 user3669714user3669714 9011 gold badge11 silver badge88 bronze badges 4

• 5 desandro.github.io/3dtransforms/docs/card-flip.html – j08691 Commented May 23, 2014 at 16:50
• Although this is informative to the accual making of the divs, there is no mention of adding the click function to it. the click function is what i need to understand. Thank you for responce. – user3669714 Commented May 23, 2014 at 17:08
• 1 Sure there is. Read the page, go through the examples, and look at the code. It's all there. We're not going to spoon feed you the answers when it appears you've done nothing more than create three divs. – j08691 Commented May 23, 2014 at 17:10
• +1 @j08691 for extracting the usage concept based on OP's content. – Sunny Patel Commented May 23, 2014 at 17:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You'll need to add a click-listener. When the element is clicked, it will run the function you define, and that is where you'd have your call to toggleClassName

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

Sources:

http://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html
http://desandro.github.io/3dtransforms/js/flip-card.js

More on event listeners in javascript:

developer.mozilla/en-US/docs/Web/API/EventTarget.addEventListener

Here is a very straight forward example using JQuery.

https://jsfiddle/james2doyle/qsQun/

<button onclick="flip()">flip the card</button>
<section class="container">
  <div class="card" onclick="flip()">
    <div class="front">1</div>
    <div class="back">2</div>
  </div>
</section>

and the JS

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

本文标签： javascriptFlipping div39s with onclickStack Overflow