通过使用CSS / Javascript单击不同的按钮来翻转多个div

Question

I'm really new to Javascript. I've been playing around a bit, and had managed to get multiple div's on a page to flip individually, using tutorials and some other help. Now, I want to see if I can flip those same div's using a button or a hyperlink instead.

I thought it would be as simple as moving the class that controls the flip to the button, but that doesn't seem to be the case. I've read that I need to adjust my Javascript to work from a passed id.

Problem is, I don't know how to do this. I've tried passing the button id through to my Javascript function on click (like so: <button class="flip-it" onClick="flipThis(card-1)">Click Me</button> ), but that doesn't work. I'm probably way off base here.

My fiddle is here . I've left the third div as I had it before, working, just to show you what I've started from.

Any help would be much appreciated.

HTML:

<p>some content above the flip card</p>

<h1>The CSS flip card:</h1> 
<div class="large_box_main">
    <div>
        <div class="sm_box" id="card-1">
            <div class="flipcard">
                <div class="flipcard-front">
                    <div class="sm_img_box">
                        <img class="image" src="http://www.catchat.org/images/ferals_block_2009.jpg" />
                    </div>
                    <div class="sm_info_box">
                         <h2>Ginger</h2> 
                         <h3>Cat 1</h3> 
                         <h4>Male</h4> 
                        <p class="info">Front</p>
                        <button class="flip-it" onClick="flipThis(card-1)">Click Me</button>
                    </div>
                </div>
                <div class="flipcard-back">
                    <div class="sm_info_box">
                         <h2>Ginger</h2> 
                         <h3>Cat 1</h3> 
                         <h4>Male</h4> 
                        <p class="info">Back</p>
                        <button class="flip-it" onClick="flipThis(card-1)">Click Me</button>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="sm_box" id="card-2">
                <div class="flipcard">
                    <div class="flipcard-front">
                        <div class="sm_img_box">
                            <img class="image" src="http://www.petrescue.org.nz/files/animal/attachment/93/small_cats.h5.jpg" />
                        </div>
                        <div class="sm_info_box">
                             <h2>Tabby</h2> 
                             <h3>Cat 2</h3> 
                             <h4>Female</h4> 
                            <p class="info">Front</p>
                            <button class="flip-it" onClick="flipThis(card-2)">Click Me</button>
                        </div>
                    </div>
                    <div class="flipcard-back">
                        <div class="sm_info_box">
                             <h2>Tabby</h2> 
                             <h3>Cat 2</h3> 
                             <h4>Female</h4> 
                            <p class="info">Back</p>
                            <button class="flip-it" onClick="flipThis(card-2)">Click Me</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sm_box flip-it">
                <div class="flipcard">
                    <div class="flipcard-front">
                        <div class="sm_img_box">
                            <img class="image" src="https://s-media-cache-ak0.pinimg.com/236x/0f/4a/56/0f4a5681046ad10f36098451bf2128d2.jpg" />
                        </div>
                        <div class="sm_info_box">
                             <h2>Siamese</h2> 
                             <h3>Cat 3</h3> 
                             <h4>Male</h4> 
                            <p class="info">Front</p>
                        </div>
                    </div>
                    <div class="flipcard-back">
                        <div class="sm_info_box">
                             <h2>Siamese</h2> 
                             <h3>Cat 3</h3> 
                             <h4>Male</h4> 
                            <p class="info">Back</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS:

.large_box_main {
    width:100%;
    margin:0px 0px 10px;
    float:left;
    display:inline;
}
.sm_box {
    width:180px;
    /* The width of this element */
    margin:10px 15px 20px;
    border: 1px solid #e3d9ec;
    border-radius: 10px;
    float:left;
}
.sm_box:hover {
    border: 1px solid #9975B9;
}
.sm_img_box {
    width:165px;
    margin:6px;
    float:left;
    display:inline;
}
.sm_info_box {
    width:165px;
    margin:8px;
    background-color:#e3d9ec;
    float:left;
    display:inline;
    text-align:center;
    line-height:7px;
    border-radius: 5px;
}
img.image {
    display:block;
    margin:0px auto;
}
.flipcard {
    position: relative;
    height: auto;
    min-height: 0px;
    /* Flip card styles: WebKit, FF, Opera */
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transition: min-height 1s ease-out 0s, -webkit-transform 1s ease-out 0.5s;
    -moz-transition: min-height 1s ease-out 0s, -moz-transform 1s ease-out 0.5s;
    -o-transition: min-height 1s ease-out 0s, -o-transform 1s ease-out 0.5s;
    /* only height adjustment for IE here */
    -ms-transition: min-height 1s ease-out 0s;
}
/* The class that flips the card: WebKit, FF, Opera */
 .flipcard.card-flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}
.flipcard .flipcard-front, .flipcard .flipcard-back, .front, .back {
    top: 0;
    left: 0;
    width: 100%;
    /* backface: all browsers */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Flip card styles: IE 10,11 */
    -ms-perspective: 800px;
    -ms-transform-style: flat;
    -ms-transition: -ms-transform 1s ease-out 0.5s;
}
.flipcard .flipcard-front, .front, .back {
    position: relative;
    display: inline-block;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flipcard .flipcard-back {
    position: absolute;
    display: none;
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    /*  webkit bug: https://bugs.webkit.org/show_bug.cgi?id=54371,
          You need this fix if you have any input tags on your back face */
    -webkit-transform: rotateY(180deg) translateZ(1px);
}
/* The 2 classes that flip the faces instead of the card: IE 10,11 */
 .flipcard .flipcard-front.ms-front-flipped {
    -ms-transform: rotateY(180deg);
}
.flipcard .flipcard-back.ms-back-flipped {
    -ms-transform: rotateY(0deg);
}
.info {
    text-align:justify;
    padding:0px 5px;
    line-height:initial;
}

Javascript:

function flipThis() {
    var $this = $(this);
    var card = $this.find('.flipcard');
    var front = $this.find('.flipcard-front');
    var back = $this.find('.flipcard-back');
    var tallerHight = Math.max(front.height(), back.height()) + 'px';
    var visible = front.hasClass('ms-front-flipped') ? back : front;
    var invisible = front.hasClass('ms-front-flipped') ? front : back;
    var hasTransitioned = false;
    var onTransitionEnded = function () {
        hasTransitioned = true;
        card.css({
            'min-height': '0px'
        });
        visible.css({
            display: 'none',
        });
        // setting focus is important for keyboard users who might otherwise
        // interact with the back of the card once it is flipped.
        invisible.css({
            position: 'relative',
            display: 'inline-block',
        }).find('button:first-child,a:first-child').focus();
    }

    // this is bootstrap support, but you can listen to the browser-specific
    // events directly as well
    card.one($.support.transition.end, onTransitionEnded);

    // for browsers that do not support transitions, like IE9
    setTimeout(function () {
        if (!hasTransitioned) {
            onTransitionEnded.apply();
        }
    }, 2000);

    invisible.css({
        position: 'absolute',
        display: 'inline-block'
    });

    card.css('min-height', tallerHight);
    // the IE way: flip each face of the card
    front.toggleClass('ms-front-flipped');
    back.toggleClass('ms-back-flipped');
    // the webkit/FF way: flip the card
    card.toggleClass('card-flipped');
}

$('button.flip-it').click(flipThis);
$('div.flip-it').click(flipThis);

Cheers! (Edited to show code)

Answer 1

I have created a modified function flipThis and removed the onclick actions from your html. jsfiddle

As I wrote in the comment, you have to recognize where you are currently in DOM. The code is self explanatory I suppose. And I also added a parameter to the flipThis function, so we know more precisely what we are working with. (not really needed, we could still work with $(this) but this is my way of doing things.

if($(e.currentTarget).prop('tagName')=="BUTTON")
    $this = $(this).closest('.sm_box');
else
    $this = $(this);